Question

所以我有一个jQ块可以交换一些类，并在用户触发时调整按钮的样式。

看起来像这样，

// Initial object selection
$(b)
    // Select the Icon
    .siblings('i')
    // add class of new icon
    .addClass('fa-check-square-o')
    // remove class of old icon
    .removeClass('fa-square-o')
    // select the parent element (label)
    .closest('label')
    // adjust for the size change of the icon
    .css('padding-right', '3px')
    // add the new button contextual class
    .addClass('btn-success')
    // remove possible old contexual button classes
    .removeClass('btn-danger btn-warning');

这可以按预期工作，但是，我有另一种情况，按钮可能有一个上下文'btn-info'类，我想确定'label'元素上是否存在该类。

我以为我能做到;

// ... jQ chain above ...
// remove possible old contextual button classes
.removeClass('btn-danger btn-warning')
// Conditonally check 'label' if it has class
.hasClass('btn-info')
// 'label' has the class... Do Stuff
.removeClass('btn-success btn-warning btn-danger');

但是我收到错误，“... removeClass（）不是函数”

我也尝试使用.has('.btn-info')代替.hasClass()而我没有收到错误但是我没有得到其他3个类的预期结果，而'btn-info'类。

这是一个带链接的逻辑工作流程，我是否有正确的期望，或者我是否对jQ提出过多的要求？

非常感谢。

用于衡量标准的Html标记，

只是一个简单的引导按钮组

<div class="btn-group btn-group-xs" data-toggle="buttons">
    <label class="btn btn-success">
        <input type="radio" name="options" id="ynna-yes" autocomplete="off">
        <i class="fa fa-square-o fa-lg"></i>
     </label>
     <label class="btn btn-danger">
         <input type="radio" name="options" id="ynna-no" autocomplete="off">
         <i class="fa fa-square-o fa-lg"></i>
      </label>
      <label class="btn btn-info">
          <input type="radio" name="options" id="ynna-na" autocomplete="off">
          <i class="fa fa-square-o fa-lg"></i>
       </label>
   </div>

Answer 1

hasClass()返回一个布尔值，所以你要使用的是filter()，它将返回匹配的元素。

.removeClass('btn-danger btn-warning')
.filter('.btn-info')
  .removeClass('btn-success btn-warning btn-danger');

Answer 2

您无法使用.hasClass()，因为它返回布尔，但可以使用.end()

来实现

结束当前链中最近的过滤操作，并将匹配元素集返回到先前的状态。

$(b)
    .closest('label:not(.btn-info)')
    .doSomething()
    .end()
    .closest('label.btn-info')
    .doSomething()

＆＃13;

$('li')
  .closest('.first')
  .css('color', 'red')
  .end()
  .closest('.second')
  .css('color', 'green');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="first">
  <li class="foo">list item 1</li>
  <li>list item 2</li>
  <li class="bar">list item 3</li>
</ul>
<ul class="second">
  <li class="foo">list item 1</li>
  <li>list item 2</li>
  <li class="bar">list item 3</li>
</ul>

＆＃13;

Answer 3

.hasClass()调用会返回一个布尔值（true或false），因此您无法从中进行链接。

您可以使用.filter()过滤元素，然后将removeClass()应用于已过滤的遗骸（可能为空）：

// remove possible old contextual button classes
.removeClass('btn-danger btn-warning')
// focus only on elements that have the btn-info class
.filter('.btn-info')
// remove classes from whatever is left
.removeClass('btn-success btn-warning btn-danger');

Answer 4

如果我理解的是对的，那么下面的内容必须对您有所帮助：

ebay.Service

Answer 5

.hasClass()的结果是布尔值（true或false），不再是jQuery对象，因此.hasClass().removeClass()不是函数。

您可以使用.filter() function代替.hasClass()，如下所示：

// ... jQ chain above ...
// remove possible old contextual button classes
.removeClass('btn-danger btn-warning')
// Conditonally check 'label' if it has class
.filter('.btn-info')
// 'label' has the class... Do Stuff
.removeClass('btn-success btn-warning btn-danger');

或者使用条件语句（如if），不幸的是它会使链条发生制动：

if(
// ... jQ chain above ...
// remove possible old contextual button classes
.removeClass('btn-danger btn-warning')
// Conditonally check 'label' if it has class
.hasClass('btn-info')
)
{
   // 'label' has the class... Do Stuff
   $(b).removeClass('btn-success btn-warning btn-danger');
}

jQuery函数链接基于类的条件，可能吗？

5 个答案: