Question

我有一个div，它只能编辑具有特定ID的div

现在，因为我从数据库列表中显示每个div，我如何单独编辑每个div。希望我很清楚。谢谢

Answer 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;');

});

它可以重复使用..

Answer 2

ID属性必须是唯一的。

如果不需要，请从html元素中删除id，并仅使用类和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/

Answer 3

请勿在循环中定义id。在HTML中，文档中的ID应为Unique。

最好指定一个类来标识每个项目的div。请注意，将删除ID并添加一个类来标识每个div

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

然后附上听取课程的事件

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

Answer 4

您可以添加其他编辑链接，因为您的修改链接可以立即编辑所有div。但按照惯例，html页面上的id应该只有一个。

分别编辑每个div

4 个答案: