javascript - 使用多个可选择的选项卡

Question

我得到了这个小 codepen我正在努力。我是 javascript 的新手，只是尽我所能地制定了一些解决方案。现在我的问题是:有没有更好的方法来做到这一点？那是我的 JS:

$(function() {
    $("#selectable").selectable();
    $("#selectable").selectable({
        selected: function(event, ui) {
            var nthchild = ($(ui.selected).index() + 1);
            $("section:nth-child(" + nthchild + ")").css('opacity', '1');
            $("section:not(:nth-child(" + nthchild + "))").css('opacity', '0');
        }
    });
});

如您所见，我刚刚得到了 nth-child，其索引为所选列表项的 + 1。然后我用 section:nth-child("+ nthchild + ") 调用匹配部分并将不透明度设置为 1。有没有更好的方法来获得多个 optional 卡？ Atm 甚至没有多个可选择的选项卡。 $("section:not(:nth-child("+ nthchild + "))").css('opacity', '0'); 只留下最后选择的那个。

我对这个 codepen 的最终目标是获得多个可选择的选项卡，当选择了多个选项卡时，它们的内容会合并(比如放在彼此下面)。

请记住，我是 javascript 的新手，想要改进。我愿意接受任何解决方案。对于多选，我使用的是 jQuery Seletable 小部件 ( http://api.jqueryui.com/selectable/ )。感谢您的帮助!

Answer 1

您可以使用 $('.ui-selected', this) 获取选定元素的列表。在其上使用 .map() 来获取选定索引的数组。然后您可以迭代这些部分并根据它们的索引是否在该数组中设置它们的可见性。

如果您希望多个部分同时出现，则必须放弃它们的当前绝对位置，而只需使用可见性 (display) 来显示或隐藏它们。这样一来，除非它们是可见的，否则它们不会占用空间，并且当您有多个可见时，它们将不会重叠。

所以改变CSS如下:

对于 .tabcontent 替换为:

position:absolute;
opacity:0;

用这个:

display:none;

然后使用这段代码:

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

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

当然，这只是一个起点。现在，当您选择多个部分时，它们会从您的绿色框中流出。因此，根据您实际要显示的内容，您需要使用 CSS 使其呈现得很好。

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

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

*{
  font-family: 'Josefin Sans', sans-serif;
  margin: 0; 
  padding: 0; 
}
#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;
}
#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;}
}

#content{
  width:60%;
  background-color:#9eefbc;
  height:500px;
  margin-left:20%;
}

.tabcontent{
    width:60%;
    top:44px;
    height:100px;
    display:none; /* no abs position, no opacity:0 */
    background-color:transparent;
    z-index:0;
    transition:.3s ease-in-out;
    text-align:center;
    font-size:5em;
    padding-top:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<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</section>
  <section class="tabcontent">2</section>
  <section class="tabcontent">3</section>
  <section class="tabcontent">4</section>
  <section class="tabcontent">5</section>
  <section class="tabcontent">6</section>
</div>