2017-02-19 271 views
0

我有一个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,我上面提到的。

回答

0

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

创建了一个名为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

示例:在选项卡1-4上添加“Hello”。然后在每个选项卡上都会显示“Hello”。但是当你选择1-4时,它不像“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

感谢您的回答,但是究竟发生了什么变化?当我给1-3添加“你好”并选择这些标签时,我仍然看到“你好”“你好”“你好”。 :/我想我应该重新提出我的问题,以便你们更好地理解我的目标。 –

+0

@TobiasGlaus我已经更新了我的示例(和分叉演示)以跨多个列表工作。 –

+0

@AndyHoffman道歉,如果这不是你,但你是否倒下了我的答案?我得到了一个随机倒计时,如果我做错了什么,我很想知道为什么我可以做得更好。 –