.not Selector就像一个切换?

时间:2015-08-18 04:40:00

标签: jquery

.not并不意味着"不是"?

首先,我知道.not选择器上有很多线程,我已经尝试了几个堆栈溢出解决方案,但到目前为止我还没有取得任何成功。

在我目前的项目中,我使用jQuery添加和删除内容可见性。我的问题是,当我点击列表项两次时,它会在可见和隐藏之间切换。我认为.not选择器会阻止这种情况,但是another thread让我觉得.not选择器不一定是我认为的。我目前正在使用

$('.rokSprocket > div._' + num)

使内容可见,

$('.rokSprocket > div').not('._' + num)

旨在使我的容器内的所有其他内容不可见。如果.not并不一定意味着"不是这个元素/类/等等。",是否有一个我可以在其中替代的选择器?

jQuery的:

        <script>
            $(document).ready(function() {
                $(".nav-tabs > li").click(function () {
                    var $this = $(this),
                        classes = $this.attr('class').toString().split(/s+/),
                        num = 0;

                    $.each(classes, function (i, v) {
                        if (v.match(/_\d+/gim).length) num = v.split('_')[1];
                    });

                    $('.rokSprocket > div._' + num)
                        .removeClass('hidden')
                        .addClass('visible');

                    $('.rokSprocket > div').not('._' + num)
                        .removeClass('visible')
                        .addClass('hidden');

                    $('.nav-tabs > li._' + num)
                        .addClass('active');

                    $('.nav-tabs > li').not('._' + num)
                        .removeClass('active');
                });
            });
            </script>

HTML:

<ul class="nav-tabs">
    <li class="_1 active">Painting</li>
    <li class="_2">Tile Floors</li>
    <!-- Etc -->
    <!-- Etc -->
    <!-- Etc -->
</ul>

<div class="rocSprocket">
    <div class="_1 visible painting">
        <p>Content</p>
    </div>

    <div class="_2 hidden tileFloors">
        <p>Different Content</p>
    </div>

    <!-- Etc -->
    <!-- Etc -->
    <!-- Etc -->
</div>

的jsfiddle: http://jsfiddle.net/o39zgp04/

1 个答案:

答案 0 :(得分:1)

有2个问题

 private TableColumn<Servicio, Float> columnDescuento;
 ...
 columnDescuento.setCellValueFactory(c -> 
      new ReadOnlyStringWrapper( String.valueOf( c.getValue().getTarifa().getDescuento() ) ) );

然后

classes = $this.attr('class').toString().split(/\s+/),//need to use \s for space

演示:Fiddle

但它可以简化很多像

&#13;
&#13;
if (v.match(/_\d+/gim)) num = v.split('_')[1];//match will return null if no match is found
&#13;
$(document).ready(function() {
  $(".nav-tabs > li").click(function() {
    var $this = $(this),
      type = $this.data('id');

    $this.addClass('active').siblings().removeClass('active');
    $('.rokSprocket ._' + type).addClass('visible').removeClass('hidden').siblings('.visible').removeClass('visible').addClass('hidden');
  });
});
&#13;
ul > li {
  display: inline-block;
  padding: 0 2%
}
.active {
  text-decoration: underline
}
.hidden {
  display: none
}
.visible {
  display: block
}
&#13;
&#13;
&#13;