2017-02-19 5 views
0

У меня есть codepen, где вам нужно выбрать некоторые вкладки, затем вы можете вставить свое имя и нажать кнопку «Отправить», и ваше имя добавится к выбранным вкладкам. Дело в том, что при выборе нескольких вкладок (я сделал это с помощью выбранного виджета jQuery) и добавлял к ним свое имя, ваше имя отображается несколько раз. Это довольно очевидно, потому что он добавляется к каждой вкладке, и это должно быть так. Моя цель в том, что javascript просто скрывает «дублированные» элементы списка. Таким образом, ваше имя есть только один раз, но все же на каждой выбранной вами вкладке. Thats мои ЯШ:Скрыть дублированные элементы списка/элементы списка с тем же контентом

$(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, который я упоминал выше.

ответ

0

Похоже, что 2 события будут отображаться в виде вкладок - выберите вкладку, затем выберите вкладку и отправьте форму. На обоих этих событиях я просматривал видимые вкладки и скрывал любые дубликаты.

Создано функция называется clearDupes(), которая будет скрывать дубликаты, и назвав его в selectionChange() и $('#plannerform').submit()

Вот ручка, так как форма не будет подавать на SO 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>

+0

Большое спасибо за Ваш ответ. Дело с вашим кодом заключается в том, что входной текст добавляется только к первой выбранной вкладке. Пример: когда вы выбираете 1-3 и добавляете что-то к нему, это видно только на вкладке 1.:/ –

+0

@TobiasGlaus, как это должно быть? Я думал, что вы хотите, чтобы имя отображалось один раз, если оно было введено на нескольких вкладках. –

+0

Пример: вы добавляете «Hello» на вкладке 1-4. Затем на каждой вкладке отображается «Hello». Но когда вы выбрали 1-4, это не похоже на «Hello» «Hello» «Hello» «Hello», потому что он находится на каждой вкладке от 1 до 4. Он отображается только один раз. Надеюсь, вы поняли, что я имею в виду –

0

Попробуйте добавить эту функцию в код:

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

+0

Спасибо, что ответили, но что именно изменилось? Когда я добавляю «Hello» до 1-3 и выбираю эти вкладки, я все еще вижу «Hello» «Hello» «Hello». :/Думаю, я должен переформулировать свой вопрос, чтобы вы, ребята, могли лучше понять мою цель. –

+0

@TobiasGlaus Я обновил свой пример (и раздвоенную демонстрацию) для работы с несколькими списками. –

+0

@ Энди Хоффман извинился, если это был не ты, но ты ответил на мой ответ? Я получил случайный снимок, и если я что-то сделаю неправильно, мне бы хотелось узнать, почему я могу сделать это лучше. –

Смежные вопросы