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.是否有更好的方法来获取多个可选标签？ 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>

使用多个可选标签

1 个答案: