Question

我有一些代码如下

<li class="active-always"><a href="#tab-03" data-toggle="tab">Alabama</a></li>
<li class="active-always"><a href="#tab-04" data-toggle="tab">Alaska</a></li>
<li class="active-always"><a href="#tab-05" data-toggle="tab">Arizona</a></li>
<li><a href="#tab-06" data-toggle="tab">California</a></li> 
<li><a href="#tab-07" data-toggle="tab">Colorado</a></li>

我在这里选择<li>个没有课程active-always

的元素

$('li:not(.active-always)').addClass('disabled')

但我不确定我是否正确行事。必须有一个更好的解决方案。因为有时使用类名会变得混乱。我经常忘记这种类名的目的。

我问自己，是CSS还是JS？

这有什么简单的选择吗？

我知道是否添加了一些自己的producton标记属性，如

<li flag-active-always><a href="#tab-05" data-toggle="tab">Arizona</a>

我的代码无效。这有什么有效的解决方案吗？也许data-active-always可以成为解决方案。

是否还有其他有效的属性前缀，例如data-...？

使用没有值的此类标记属性是否有效。data-active-always而不是data-active-always="true"？

Answer 1

没有使用这种标记属性是否有效 values.data-active-always而不是data-active-always =＆＃34; true＆＃34;？

data-*属性不需要设置值，但可能无效XHTML

＆＃13;

$("li:not([data-active-always])").addClass("disabled");

＆＃13;

.disabled a {
  color:gray;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="active-always"><a href="#tab-03" data-toggle="tab">Alabama</a></li>
<li data-active-always><a href="#tab-04" data-toggle="tab">Alaska</a></li>
<li data-active-always><a href="#tab-05" data-toggle="tab">Arizona</a></li>
<li><a href="#tab-06" data-toggle="tab">California</a></li> 
<li><a href="#tab-07" data-toggle="tab">Colorado</a></li>
  </ul>

＆＃13;

Answer 2

是的，使用data-flag-always是有效的。但是你走在正确的轨道上，尝试删除选择器.not（），它将专门搜索类：

$('li').not('.active-always').addClass('disabled');

.disabled > a {
    color: purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active-always"><a href="#tab-03" data-toggle="tab">Alabama</a></li>
<li class="active-always"><a href="#tab-04" data-toggle="tab">Alaska</a></li>
<li class="active-always"><a href="#tab-05" data-toggle="tab">Arizona</a></li>
<li><a href="#tab-06" data-toggle="tab">California</a></li> 
<li><a href="#tab-07" data-toggle="tab">Colorado</a></li>

jquery选择器的类替代

2 个答案: