我有一个codepen,你必须选择一些选项卡,然后您可以将您的姓名,然后按提交你的名字被添加到选定的标签。问题是,当你选择多个选项卡(我用jQuery可选择的部件做了这个)并将你的名字添加到他们,你的名字被多次显示。这很明显,因为它被添加到每个标签,应该是这样的。 我的目标是JavaScript只是隐藏“重复”列表项。所以你的名字只有一次,但仍然在你选择的每个标签上。 这就是我的JS:隐藏复制列表项/列表项内容相同
$(function() {
$('#plannername').prop('disabled', true);
$('#plannername').attr("placeholder", "zuerst Tage auswählen");
$('#plannersubmit').attr("value", " ");
function selectionChange(event, ui) {
var items = $('.ui-selected', this).map(function() {
return $(this).index();
}).get();
$("section").each(function() {
$(this).toggle(items.indexOf($(this).index()) > -1);
});
$('#plannername').prop('disabled', false);
$('#plannername').attr("placeholder", "Name eingeben");
$('#plannersubmit').attr("value", "eintragen");
}
$("#selectable").selectable();
$("#selectable").selectable({
selected: selectionChange,
unselected: selectionChange
});
});
$(function(){
$('#plannerform').submit(function(e){
var val = $(this).find('#plannername').val();
$('ul.plannerlist:visible').append('<li>' + val + '</li>');
e.preventDefault();
$('#plannername').val('');
});
});
而这些是我的HTML标签:
<div id="content">
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
<section class="tabcontent">
<ul class="plannerlist">
</ul>
</section>
</div>
如果你需要看我的整个代码,你可以检查出我codepen,我上面提到的。
非常感谢您的回答。代码中的内容是输入文本仅附加到第一个选定的选项卡上。例如:当您选择1-3并为其添加内容时,它仅在选项卡1上可见。:/ –
@TobiasGlaus它应该如何改为?我以为你只希望这个名字在多个标签上输入时显示一次。 –
示例:在选项卡1-4上添加“Hello”。然后在每个选项卡上都会显示“Hello”。但是当你选择1-4时,它不像“Hello”“Hello”“Hello”“你好”,因为它在1到4的每个选项卡上。它只显示一次。我希望你明白我的意思 –