jQuery – 使用替换div选择/取消选择多选选项

我正在进行一个模式多选替换，它接受一个元素并用div替换它的 s。 我是一个jQuery新手，现在我已经达到了一个目的，我的替换工作完美，但function上有一些打嗝。

所需的function如下：

1. 单击“选择您的选项” ，创建一个模式对话框，其中包含已使用每个 .text()填充的div.option列表。

2. 当您从模态中选择一个选项时，它会将一个.selected类应用于div.option选择相应的并将该的.text()追加到

3. 内的
   之外。模态。

   • 当您单击其中一个新生成的

   • ，
   • 本身应该是.fadeOut(); 和.remove(); 同时使相应的取消选中。

   • 如果在此之后单击“选择您的选项”，您应该能够选择/取消选择并在

     相应地反映出来。

截至目前，除步骤4外，一切都是正确的。

我在这里包含了我的代码： jsfiddle.net/zumwalt/HB7HJ/ 。

再一次，我是jQuery / js的新手，所以我很肯定我已经采取了一些步骤来创建这个没有意义的东西。

任何帮助是极大的赞赏！

Answer 1

你的js中有几个问题。 我更新你的小提琴，检查出来： http ： //jsfiddle.net/HB7HJ/13/

我做的第一件事是删除这两行：

 $('ul.multiselect-dropdown-options-'+name+'').empty(); $('div.option', multiselectmodal).removeClass('selected'); 

他们在调用模态时删除了所选项目。 我相信我们不希望这样：P

然后，我检查了您的选项是否被选中，如果没有，则添加选项，如果没有，则删除它：

 if ($(this).hasClass('selected')) { $('ul.multiselect-dropdown-options').append('
'+optiontext+'x
'); } else { $('.drop-down-option-' + value).fadeOut().remove(); } 

我还从它的位置取出了以下js（在click（）函数内部，没有多大意义）：

 $('.dropdown-option-'+value+'').click(function(){ $(this).fadeOut(500, function () { $(this).remove(); }); option.removeAttr('selected'); $('div.option-'+value+'').removeClass('selected'); }); 

我现在正在重新审视你的代码，我认为它可能会有所改进，如果我发现了什么，我会更新它。 无论如何，对于新手来说一点都不差：D

第二次看后编辑：P

删除一行时，我之前的小提琴失败了:(我设置了一个新的工作小提琴： http ： //jsfiddle.net/HB7HJ/15/

我重构了代码，使imho更容易理解。 正如开膛手杰克所说，让我们按部分去做：

1. 从js中删除了HTML中可能正确的HTML（并将其添加到HTML：P）。
2. 删除了一些未使用的东西，比如滚动的东西和一些无用的变量。 也许你需要在你的应用程序中，所以要小心。 无论如何，因为这不是答案的重点，它只是混淆了代码。
3. 添加了选项值作为.option s和.dropdown-option s的id。 我们稍后会需要它们来检查点击选项。
4. 从循环中取出click()事件（模态和选项的东西），我认为这样更清晰。 这就是为什么我们需要选项上的ID。
5. 调整.option和.dropdown-option的click()事件，以便它获取id并根据该id添加/选择/删除/取消选择正确的选项。

而我认为就是这样。 我确信这个代码可以大大改进，但我试图尊重你的代码，因此它更容易理解，我相信它可以作为一个工作基础。 如果您还有其他问题，请告诉我:)

Answer 2

我认为问题是您要添加以下标记：

 
 
Choose your options 

使用jQuery。 我看到你在UL的最后一堂课中加入了-'+name+' ，但我看不出这样做的理由。

我继续把你的jQuery拉出来并输入你的HTML，现在页面似乎工作正常。

你可以在这里看到它： http ： //jsfiddle.net/HB7HJ/12/

看看你的jQuery，看起来你正在通过代码添加相当多的HTML。 有什么理由说它不能只是静态的吗？

希望这能解决你的问题！