Doppelte Listenelemente/Listenelemente mit gleichem Inhalt ausblenden

Question

Ich habe eine codepen, in der Sie einige Registerkarten auswählen müssen, dann können Sie Ihren Namen eingeben und auf Senden drücken und Ihr Name wird an die ausgewählten Registerkarten angehängt. Die Sache ist, wenn Sie mehrere Registerkarten auswählen (ich habe das mit dem auswählbaren jQuery-Widget gemacht) und Ihren Namen hinzufügen, wird Ihr Name mehrfach angezeigt. Das ist ziemlich offensichtlich, weil es zu jedem Tab hinzugefügt wird und das sollte so sein. Mein Ziel ist, dass Javascript nur die "duplizierten" Listenelemente verbirgt. So ist Ihr Name nur einmal, aber immer noch auf jedem Tab, das Sie ausgewählt haben. Das ist mein 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(''); 
    }); 
}); 

Und das sind meine HTML-Tabs:

<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> 

Wenn Sie meinen ganzen Code benötigen, um zu sehen, Sie können meine codepen überprüfen, die ich oben erwähnt.

Answer 1

Sieht aus wie 2 Ereignisse werden Tabs zeigen Inhalt - Wählen Sie eine Registerkarte, dann eine Registerkarte auswählen und das Formular absenden. Bei diesen beiden Ereignissen würde ich die sichtbaren Registerkarten durchlaufen und alle Duplikate ausblenden.

eine Funktion Erstellt clearDupes() genannt, die Duplikate verstecken, und es in selectionChange() und auf $('#plannerform').submit()

Hier ist ein Stift, da die Form SO nicht auf http://codepen.io/mcoker/pen/YNoVOo

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

*{ 
 
    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; 
 
\t transition: transform 0.8s, background-color 0.8s; 
 
\t -webkit-transform: perspective(300px) rotate3d(1,0,0,-180deg); 
 
\t transform: perspective(300px) rotate3d(1,0,0,-180deg); 
 
\t -webkit-transform-origin: 50% 100%; 
 
\t transform-origin: 50% 100%; 
 
\t -webkit-perspective-origin: 50% 100%; 
 
\t 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; 
 
}

<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>

Aufruf einreichen

Answer 2

Versuchen Sie, diese Funktion zu Ihrem Code hinzuzufügen:

function isUnique(name) { 
    var is_unique = true; 

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

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

    return is_unique; 
} 

Wir vergleichen den Text jedes Listenelements mit dem aktuellen Namen, den wir an die sichtbare Liste anhängen möchten.

Sie könnten die Funktion wie folgt verwendet werden:

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

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

... 

Forked demo