仅将列表项附加到选定选项卡内的列表

Question

我有一个小codepen，在那里我有多个可选标签（带有 jQ​​uery 可选小部件）。在此之上，我得到了一个带有文本输入和提交按钮的表单。当我插入一些文本并提交时，它会将文本添加到每个选项卡上的列表中。我的目标是仅将输入文本附加到所选选项卡的列表中。 那是我的javascript：

$(function() {
    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);
        });
        console.log(items);
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });
});


$(function(){
   $('#plannerform').submit(function(e){
       var val = $(this).find('#plannername').val();
       $('ul.plannerlist').append('<li>' + val + '</li>');
       e.preventDefault();
   });
});

这就是 HTML：

<form id="plannerform">
    <input id="plannername" placeholder="Name eingeben" type="text"></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">1
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">2
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">3
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">4
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">5
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">6
    <ul class="plannerlist">
    </ul> 
  </section>
</div>

如果您需要更多代码，完整的代码在我上面提到的我的 codepen 上。

Answer 1

改为附加到$('.tabcontent:visible .plannerlist')，如果没有可见（初始状态），则附加到第一个.tabcontent中的那个

这是一支笔，因为表单提交在 SO http://codepen.io/mcoker/pen/YNoNdN 上不起作用

$(function() {
    // define one function, to be used for both select/unselect
    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);
        });
        console.log(items);
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });
});


$(function(){
    $('#plannerform').submit(function(e){
        var val = $(this).find('#plannername').val();
        var $target = $('.tabcontent:visible').length ? $('.tabcontent:visible .plannerlist') : $('.tabcontent:first-child .plannerlist');
        $target.append('<li>' + val + '</li>');
        e.preventDefault();
    });
});

*{
  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;
    padding-left:100px;
}

#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;
}

<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">1
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">2
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">3
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">4
    <ul class="plannerlist">
    </ul>
  </section>
  <section class="tabcontent">5
    <ul class="plannerlist">
    </ul>  
  </section>
  <section class="tabcontent">6
    <ul class="plannerlist">
    </ul> 
  </section>
</div>

Answer 2

您可以将选定的索引存储在点击处理程序中，然后在附加数据时将其过滤掉：

$(function() {
    //Create a variable to store the indices of selected items
    var selectedIndices = [];

    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);
        });
        console.log(items);
        //Store the indices so that they can be accessed when the plannerform gets submitted
        selectedIndices = items;
    }

    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: selectionChange,
        unselected: selectionChange
    });

   $('#plannerform').submit(function(e){
       var val = $(this).find('#plannername').val();
       //filter the list, leaving only the elements whose indices are present in the selectedIndices array
       $('ul.plannerlist').filter(function(index) {
            return selectedIndices.indexOf(index) > -1;
        }).append('<li>' + val + '</li>');
       e.preventDefault();
   });
});