Javascript jquery树遍历的问题

（1） 我有一个场景，其中有一些带有“其他”（用户键入的选项）复选框的复选框

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

（3） 用户可以在那里输入，复选框旁边有一个“ok”按钮

（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>');
});

$（'.otherOption输入[type=“checkbox”]'）。单击（函数（）{
$（this）.closest（'.otherOption'）.find（'.box'）.toggle（）；
});
$（'.ok'）。单击（函数（）{
var值=$（'.optionInput'）.val（）；
$（'.box'）.hide（）；
$（'.otherOption p'）。文本（值）；
$（'.otherOption'）.removeClass（'otherOption'）；
$（this）.最近（'.otherOption'）。追加（'Other
Ok'）；
});

我想，我可以正确地写一些脚本。但是，由于我不擅长jQuery，我无法编写jQuery选择器（.closest（），.parents（），.next（）等等），这就是为什么我的脚本无法工作的原因。所以，请帮我把我的脚本修改好。提前谢谢

---

良好的开端。有几件事可以让它按你想要的方式工作

您可以编写

$（'.otherOption'）.removeClass（'otherOption'）删除otherOption类的所有实例，这就是您的附加无法工作的原因

如果您删除了上面提到的行，您将在另一个复选框的包装中添加新的复选框，我可以想象这不是期望的结果。我可以想象您希望新的复选框出现在旧的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>');

$（此）
.closest（“.otherOption”）
.removeClass（“其他选项”）
.之后（“Other
Ok”）；

一个旁注-因为您稍后会想知道-您的
.click（）
函数只能工作一次<代码>。单击（）

绑定到页面加载上的所有匹配对象。因此，页面加载后动态添加的任何项目都将无法工作。研究使用jQuery的

.on（）

方法。这将确保您的代码在所有匹配项上都有效，无论它们何时添加到DOM

编辑：还有一件事，我注意到当你重复添加项目时，它总是从第一个框中添加文本b/c你没有删除使用过的文本框。我添加了

$（this）.closest（'.box'）.remove（）到JS代码的末尾以修复此问题

下面是jQuery的
.on（）
实现的一个工作界面

不要只是复制和粘贴它，要理解它。
在已经存在的“其他”选项上方插入一个新结构可能更有意义。为什么要替换它的文本，并添加一个全新的“其他”选项块？此版本将在“其他”选项上方插入一个新选项。这样，您也只需要绑定到元素一次

$( '.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>'
  );
});

$（'.ok'）。单击（函数（）{
var值=$（'.optionInput'）.val（）；
$（'.optionInput'）.val（''）；
$（this.parent（）.parent（）.find（'.box，p'）.toggle（）；
$（'.otherOption输入[type=“checkbox”]'）.attr（'checked'，false）；
$（“#optionContainer”）。追加(
“”+值+”
”
);
});

它在做什么你不想做的事？这正是我想要的。谢谢我正在努力理解一切