Редактировать каждый div отдельно

Question

Редактировать каждый div отдельно

0

У меня есть div, и он может редактировать только div с определенным идентификатором

Теперь, когда я показываю каждый div из списка базы данных, как я могу редактировать каждый div отдельно. Надеюсь, что я свободен. Спасибо.

Richa 31 март 2014, в 14:34

Источник

0

так у вас есть кнопка редактирования, готово и скрыть для каждого div?
Jai 31 март 2014, в 11:46
0

Да, у меня есть для каждого div. Поскольку я показываю список из БД и foreach, кнопка «Изменить и удалить» добавляется для каждого div, но редактируется только div с панелью идентификатора.
Richa 31 март 2014, в 11:48
0

что это => "@ Html.DisplayFor" ?? @ HTML означает что? Такого нет ни в jQuery, ни в jScript.
Pratik 31 март 2014, в 11:48
0

@PratikJoshi Это код Razor для отображения элемента из списка
Richa 31 март 2014, в 11:49
0

@ RS26, извини, но в asp.net я никогда так не кодировал!
Pratik 31 март 2014, в 11:50
0

Razor - это новое и самый простой способ отображать данные из модели для просмотра. Я делаю это как приложение MVC
Richa 31 март 2014, в 11:51
0

в цикле идентификаторы должны генерироваться уникально для каждого элемента.
Jai 31 март 2014, в 11:53
0

У вас есть те же идентификаторы в foreach, что является грехом в JavaScript.
Pratik 31 март 2014, в 11:55
0

Есть ли способ сделать div редактируемым, основываясь на том, выбран он или нет?
Richa 31 март 2014, в 11:57

Показать ещё 7 комментариев

Теги:

javascript

jquery

asp.net

asp.net-mvc

4 ответа

1

Используйте что-то вроде этого

$('.edit-link').click(function () {
    $(this).parent().attr("contentEditable",true);
    $(this).parent().next(".panel-collapse").attr("contentEditable",true);


    $(this).parent().attr('style', 'border:2px solid;');
    $(this).parent().next(".panel-collapse").attr('style', 'border:2px solid;');
    $(this).attr('style', 'display:none;');
    $(this).next(".done-link").attr('style', 'display:inline:block;');

});

Его можно использовать повторно.

Anoop Joshi 31 март 2014, в 09:08

0

Не указывайте id в цикле. Идентификатор HTML должен быть Unique в документе.

Лучше указать класс для определения div для каждого элемента. Обратите внимание, что идентификаторы удалены и добавлен класс для идентификации каждого div

@foreach (var item in Model)
{
 <div class="panel panel-default main-panel">
  ..
   <h4 class="panel-title newpanel">

Затем присоедините свои события, которые прослушивают классы

  $('.newpanel').on('click','.edit-link', function(){});

Murali Murugesan 31 март 2014, в 09:33

0

Вы можете добавить другую ссылку редактирования, поскольку ваша ссылка на редактирование делает все редактируемые div одновременно. Но, как соглашение, идентификатор на странице html должен быть только одним.

Khasan 24-7 31 март 2014, в 09:01

Ещё вопросы

так у вас есть кнопка редактирования, готово и скрыть для каждого div?
Да, у меня есть для каждого div. Поскольку я показываю список из БД и foreach, кнопка «Изменить и удалить» добавляется для каждого div, но редактируется только div с панелью идентификатора.
что это => "@ Html.DisplayFor" ?? @ HTML означает что? Такого нет ни в jQuery, ни в jScript.
@PratikJoshi Это код Razor для отображения элемента из списка
@ RS26, извини, но в asp.net я никогда так не кодировал!
Razor - это новое и самый простой способ отображать данные из модели для просмотра. Я делаю это как приложение MVC
в цикле идентификаторы должны генерироваться уникально для каждого элемента.
У вас есть те же идентификаторы в foreach, что является грехом в JavaScript.
Есть ли способ сделать div редактируемым, основываясь на том, выбран он или нет?

Irvin Dominin · Accepted Answer · 2014-03-31T10-02-00.000Z

Идентификатор атрибута должен быть уникальным.

Если не требуется удалить идентификатор из ваших элементов html и использовать только иерархию классов и DOM для поиска и обработки вашего объекта DOM соответствующим образом.

Что-то вроде этого:

$(document).ready(function () {
    $('.edit-link').click(function () {
        $(this).siblings('.panel-title').attr('contenteditable', 'true');
        $(this).closest(".panel").find('.panel-collapse').attr('contenteditable', 'true');        
        $(this).siblings('.panel-title').attr('style', 'border:2px solid;');
        $(this).closest(".panel").find('.panel-collapse').attr('style', 'border:2px solid;');
        $(this).attr('style', 'display:none;');
        $(this).siblings('.done-link').attr('style', 'display:inline:block;');

    });

    $('.done-link').click(function () {
        $(this).siblings('.panel-title').attr('contenteditable', 'false');
        $(this).closest(".panel").find('.panel-collapse').attr('contenteditable', 'false');   
        $(this).closest('.panel-title').attr('border:none;');
        $(this).closest(".panel").find('.panel-collapse').attr('style', 'border:none;');
        $(this).attr('style', 'display:block;');
        $(this).siblings('.done-link').attr('style', 'display:none;');

    });

    $('.delete-link').click(function () {
        $(this).siblings('.panel-title').text('');
    })

});

Демо: http://jsfiddle.net/wf8yJ/8/

Спасибо, но это только делает заголовок редактируемым, а не другую часть div ??
@ RS26 исправлено, см. Редактирование; но, пожалуйста, внимательно посмотрите код и попытайтесь понять его, если вам нужны пояснения, спросите их здесь
Большое спасибо, было немного больше изменений, но я исправил это. Спасибо сэр
Сэр, не могли бы вы помочь мне с этим, если это возможно stackoverflow.com/questions/22759545/showing-edited-content Спасибо