Question

我有一个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。

Answer 1

看起来2个事件会使标签显示内容 - 选择标签，然后选择标签并提交表单。在这两个事件中，我将遍历可见选项卡，并隐藏任何重复项。

创建了一个名为clearDupes()的函数，该函数将隐藏重复项，并在selectionChange()和$('#plannerform').submit()上调用

这是一支钢笔，因为表单未能在SO http://codepen.io/mcoker/pen/YNoVOo

上提交

＆＃13;

$(function() {

    function clearDupes() {
        var arr = [];
        $('.plannerlist li').removeClass('hidden');
        $('.tabcontent:visible').each(function() {
            $(this).find('.plannerlist li').each(function() {
                var nameText = $(this).text();
                if (arr.indexOf(nameText) > -1) {
                    $(this).addClass('hidden');
                } else {
                    arr.push(nameText);
                }
            })
        })
    }

    // define one function, to be used for both select/unselect
    $('#plannername').prop('disabled', true);
    $('#plannername').attr("placeholder", "zuerst Tage auswählen");
    $('#plannersubmit').attr("value", " ");

    function selectionChange(event, ui) {
        // Get indexes of selected items in an array
        var items = $('.ui-selected', this).map(function() {
            return $(this).index();
        }).get();
        // Show or hide sections according to the corresponding option's selection
        $("section").each(function() {
            $(this).toggle(items.indexOf($(this).index()) > -1);
        });
        $('#plannername').prop('disabled', false);
        $('#plannername').attr("placeholder", "Name eingeben");
        $('#plannersubmit').attr("value", "eintragen");
        clearDupes();
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });

    $('#plannerform').submit(function(e) {
        var val = $(this).find('#plannername').val();
        $('ul.plannerlist:visible').append('<li>' + val + '</li>');
        e.preventDefault();
        $('#plannername').val('');
        clearDupes();
    });
});

＆＃13;

*{
  font-family: 'Josefin Sans', sans-serif;
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}
#selectable .ui-selecting { 
  background: #9eefbc;
  transition:.8s ease-in-out;
  -webkit-transition: -webkit-transform 0.8s, background-color 0.8s;
	transition: transform 0.8s, background-color 0.8s;
	-webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg);
	transform: perspective(300px) rotate3d(1,0,0,-180deg);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-perspective-origin: 50% 100%;
	perspective-origin: 50% 100%;
}
#selectable .ui-selected { 
  background: #6dce91; 
  transition:all 0.8s;
}
#selectable { 
  list-style-type: none; 
  position:absolute;
  width: 60%;
  margin-left:20%;
  display:flex;
  transition:.3s ease-in-out;
  z-index:1;
  margin-top:3px;
}
#selectable li { 
  background:#ddffea;
  padding: 0.6em; 
  font-size: 1.4em; 
  flex-grow:1;
  transition:.3s ease-in-out;
  border:none;
  text-align:center;
  line-height:0.8em;
}

#selectable .ui-selected:after,
#selectable .ui-selected::after {
    position: absolute;
    top: 44px;
    margin-left:-50px;
    transition: .2s ease-in-out;
    content: '';
    width: 0;
    height: 0;
    opacity:1;
    animation:dreieckFade 1s forwards;
    border-top: solid 15px #6dce91;
    border-left: solid 20px transparent;
    border-right: solid 20px transparent;
}

@keyframes dreieckFade{
    0%{opacity:0;border-top: solid 0px #6dce91;}
    100%{opacity:1;border-top: solid 15px #6dce91;}
}

.ui-selectable-helper {
  visibility: hidden;
}

#content{
  width:60%;
  background-color:#9eefbc;
  margin-left:20%;
  padding-top:70px;
  margin-top:3px;
  padding-bottom:30px;
}

.tabcontent{
    top:44px;
    background-color:transparent;
    z-index:0;
    transition:.3s ease-in-out;
    font-size:2em;
    display:none;
    text-align:center;
}

#plannername{
  width:40%;
  background-color:#9eefbc;
  margin-left:20%;
  border:0;
  font-size:2em;
  padding:20px;
}
#plannername:focus{
  outline:0;
}
#plannersubmit{
  width:20%;
  background-color:#6dce91;
  border:0;
  font-size:2em;
  padding:20px;
  transition:.2s ease-in-out;
}
#plannersubmit:hover{
  transition:.2s ease-in-out;
  padding-left:40px;
  cursor:pointer; 
}
#plannersubmit:focus{
  outline:0;
}
#plannersubmit:active{
  color:white;
}
.plannerlist{
    list-style-type:none;
}
.hidden {
    display: none;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<form id="plannerform">
    <input id="plannername" placeholder="Name eingeben" type="text" autocomplete="off"></input><!--
    --><input id="plannersubmit" type="submit" value="eintragen"></input>
</form>
<ol id="selectable">
  <li class="ui-widget-content">FR PM</li>
  <li class="ui-widget-content">SA AM</li>
  <li class="ui-widget-content">SA PM</li>
  <li class="ui-widget-content">SO AM</li>
  <li class="ui-widget-content">SO PM</li>
  <li class="ui-widget-content">MO AM</li>
</ol>
<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>

＆＃13;

Answer 2

尝试将此功能添加到您的代码中：

function isUnique(name) {
    var is_unique = true;

    $('ul li').each(function(item, index) {

        if ($( this ).text() === name) {                  
            is_unique = false;
        }
    });  

    return is_unique;
}

我们将每个列表项的文本与我们尝试附加到可见列表的当前名称进行比较。

你可以使用这样的功能：

var val = $(this).find('#plannername').val();       

if (isUnique(val)) {
    $('ul.plannerlist:visible').append('<li>' + val + '</li>');
    $('#plannername').val('');            
}

...

Forked demo

隐藏具有相同内容的重复列表项/列表项

2 个答案: