jQuery树遍历的问题

Question

（1）我有一种情况，其中有些复选框带有“其他”（用户键入的选项）复选框

（2）单击“其他”复选框时，将出现一个输入字段并覆盖“其他”文本。

（3）用户可以在此处键入内容，并且该复选框旁边有一个“确定”按钮。

（4）当用户单击“确定”按钮时，输入字段将消失，并且用户键入的文本将位于先前“其他”文本的位置。 同时，新的“其他”字段应位于之前的字段之后。 同样，以前的“其他”不应再扩展，因为它不再是“其他”（例如，现在是黑色）。

为此，我编写了这样的jQuery：

$('.otherOption input[type="checkbox"]').click(function() {
    $(this).closest('.otherOption').find('.box').toggle();    
});

$('.ok').click(function() {
    var value = $('.optionInput').val();

    $('.box').hide();
    $('.otherOption p').text(value);
    $('.otherOption').removeClass('otherOption');
    $(this).closest('.otherOption').append('<div class="block otherOption"><input type="checkbox" /> <p>Other</p><div class="box"><input type="text" value="" placeholder="Provide your option" class="optionInput" /><button class="ok">Ok</button></div></div>');
});

我认为，我可以正确编写一些脚本。 但是，由于我不擅长jQuery，因此无法编写jquery选择器（.closest（）、. parents（）、. next（）等），这就是为什么我的脚本无法正常工作。 因此，请帮助我使脚本正确无误。 提前致谢

我的小提琴

Answer 1

好的开始。 有几件事情可以使您以所需的方式工作。

1. 您编码$('.otherOption').removeClass('otherOption'); 删除otherOption类的所有实例，这就是为什么您的追加无法正常工作的原因。
2. 如果删除了上述行，则将新复选框附加到另一个复选框的包装中，我可以想象这不是理想的结果。 我可以想象您希望新的复选框出现在.after .after()旧的otherOption框中。

据说这些删除了这一行： $('.otherOption').removeClass('otherOption');

并将$(this).closest('.otherOption')...更改为

$(this)
    .closest('.otherOption')
    .removeClass('otherOption')
    .after('<div class="block otherOption"><input type="checkbox" /> <p>Other</p><div class="box"><input type="text" value="" placeholder="Provide your option" class="optionInput" /><button class="ok">Ok</button></div></div>');

附带说明-您稍后可能会怀疑.click()函数将不会多次运行。 .click()绑定到页面加载时的所有匹配对象。 因此，页面加载后动态添加的所有项目均将无法正常工作。 查看使用jQuery的.on()方法。 这将确保您将代码用于所有匹配项，无论何时将它们添加到DOM。

编辑：另一件事，我注意到当您重复添加项目时，它总是从第一个框b / c中添加文本，而您并没有删除使用的文本框。 我添加了$(this).closest('.box').remove(); JS代码的末尾以解决此问题。

这是jQuery的.on()实现的http://jsfiddle.net/a695jk2d/4/

不要只是复制并粘贴它，了解它。

Answer 2

只需在现有的“其他”选项上方插入一个新结构，可能会更有意义。 为什么要替换它的文本，并添加一个全新的“其他”选项块？ 此版本将在“其他”选项上方插入一个新选项。 这样，您还只需绑定一次元素。

$( '.ok' ).click(function () {
  var value = $( '.optionInput' ).val();
  $( '.optionInput' ).val('');

  $( this ).parent().parent().find( '.box, p' ).toggle();
  $( '.otherOption input[type="checkbox"]' ).attr( 'checked', false );
  $( '#optionContainer' ).append(
    '<div class="block"><input type="checkbox" /> <p>' + value + '</p></div>'
  );
});

jsFiddle