仅将列表项添加到选定选项卡中的列表
问题描述:
我得到了一点codepen,其中我有多个可选择的选项卡(带有jQuery可选小部件)。在上面,我得到了一个带有文本输入和提交按钮的表单。当我插入一些文本并提交时,它会将文本添加到每个选项卡上的列表中。我的目标是输入文本只会附加到选定选项卡的列表中。 那是我的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我上面提到的。
答
附加到$('.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;
\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;
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>
答
你可以存储在单击处理程序选定索引,然后过滤那些出来的时候,你将数据追加:
$(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();
});
});
+0
感谢您的回答,但我想补充:可见像这样'$('.tabcontent:visible .plannerlist')'是非常容易的。但我感谢你的帮助! –
啊,我不知道:可见。感谢那个简单的解决方案。第二部分,该项目被追加到第一个列表上,当没有选项卡被选中时,对我来说是非常不相关的,因为我希望用户先选择一些标签然后提交(我会用一些注释来标识)。但是,谢谢你:)很高兴知道。 –
@TobiasGlaus np。在这种情况下,如果有人没有选择标签(可能是坏的UX,因为用户可能不知道他们必须在搜索之前选择标签),或者默认选择第一个标签(似乎是更好的解决方案)。 –
是的,它就像一个计划者,你可以注册几天。所以我认为禁用搜索输入是最好的解决方案 –