Question

我正在制作一个测验模块，我想让管理员为问题添加更多可能性，并进一步删除个别问题。我做了以下jquery，如果我不删除任何项目，它会将正确的数字附加到每行的id中。但是，如果我开始删除，它将混合id周围。重要的是我要正确，因为它应该放在数据库中，用户可以将其拉出来，并以与创建时相同的顺序显示它。

因此我做了一个while循环，检查id后面的数字是否按正确的顺序排列（如果不是，它应该用最后的正确数字替换id），因为我在删除一行后递增。我似乎无法让它工作！

的jsfiddle： https://jsfiddle.net/g8ysemf0/

的jQuery

            $("#btnid").click(function () {
            $('.valgmulighed:last').clone().attr('id', 'valgmulighed' + ($('.valgmulighed').length + 1)).insertAfter('.valgmulighed:last');
        });

        var max = $('.valgmulighed').length;
        var i = 1;

        $('body').on('click', '.slet', function () {

            if ($('.slet').length > 1)
                $(this).closest('.valgmulighed').remove();

            while (i < max) {
                if ($('.valgmulighed').length != '.valgmulighed' + i) {
                    $('.valgmulighed').attr('id', 'valgmulighed' + i);
                }
                i++;
            }
        });

HTML

    <div class="toptekst">
  <span>Tilføj valgmuligheder her</span>
  <input type="button" id="btnid" value="+" />
</div>
<div class="valgmulighed" id="valgmulighed1">
  <label>
    <input type="checkbox" name="check2" id="sv1" /><span class="label-text">Rigtigt</span>
  </label>
  <input id="Text3" type="text" class="spmtekst2" placeholder="Tekst valgmulighed" onfocus="this.placeholder=''" onblur="this.placeholder='Tekst valgmulighed'" />
  <div class="slet">
    <span>Slet</span>
  </div>
</div>

Answer 1

很容易删除项目并为剩余项目提供新的ID：

$(".slet").on("click", function(event) {
    // remove the item
    $(this).closest('.valgmulighed').remove();
    // set id of remaining items
    $(".valgmulighed").each(function(index) {
        $(this).attr("id", "valgmulighed" + index);
    });
});

但是每次删除问题时都可能不需要设置新的id。用稀疏的id s集合填充数据库是否可以接受？例如，

<div id="valgmulighed1">...</div>
<div id="valgmulighed3">...</div>
<div id="valgmulighed4">...</div>
<div id="valgmulighed9">...</div>

？如果这样可以，那么只需在创建时增加<div> id，并在删除时不执行任何操作。

Answer 2

要完全充实我的建议，请看这个更新的小提琴： https://jsfiddle.net/g8ysemf0/2/

首先，没有删除测验项的功能，因此我将整个集合放在一个包装器中，以便能够设置一个事件来检测动态生成的.slet个对象的点击次数

$('#wrapper').on('click','div.slet', function(){$(this).parent().remove();})

接下来，我放入了一个用于将页面提交到数据库的按钮。我在该按钮上设置了一个函数，它将遍历用户完成编辑后存在的每个项目，然后为这些项目分配新的ID：

 $('#submit-quiz').click(function(){
   //create counter
   var counter = 0;
   //go through each item and assign them new IDs
   $('div.valgmulighed').each(function(){
     //add to the counter for each quiz item
     counter++;
     //set the ID
     $(this).attr('id', 'valgmulighed' + counter);
   });
//Any submit functions/logic after all IDs are assigned
return true;
});

＆＃34;接受＆＃34;答案也是一种很好的方法，在删除项目时更新ID。这完全取决于您何时想要执行该操作。

选择第一，第二。。。循环中的一个jquery中的div

2 个答案:

选择第一，第二。 。 。循环中的一个jquery中的div

2 个答案:

选择第一，第二。。。循环中的一个jquery中的div