Question

所需行为

在更改复选框的已检查状态时，我想删除或添加一个类。

我具有逻辑工作的功能，但在遍历和定位特定li并进行样式更改时遇到问题。

HTML

<div class="one">
    <div class="two">
        <p>31</p>
        <div class="three">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" class="css-checkbox" id="checkboxG1" name="checkboxG1">
                            <label class="css-label" for="checkboxG1">area_01 - click me</label>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="four">
        <ul>
            <li class="area_01 common"></li>
            <li class="area_02 common"></li>
            <li class="area_03 common"></li>
            <li class="area_04 common"></li>
            <li class="area_05 common"></li>
            <li class="area_06 common"></li>
        </ul>
    </div>
</div>

的jQuery

以下是我在使用next()一系列失败尝试后的最后一次尝试。

我弄乱了我的遍历，或者我没有正确使用removeClass()。

$("input.css-checkbox:checkbox").change(function () {
    if (this.checked) {
        // remove a class
        //var myVar = $(this).next($("li.area_01"));
        var myVar = $(this).parent().parent().parent().find(".four").find("li.area_01");
        myVar.removeClass("common");
    } else if (!this.checked) {
        // add a class
        var myVar = $(this).parent().parent().parent().find(".four").find("li.area_01");
        myVar.addClass("common");
    }
});

的jsfiddle

http://jsfiddle.net/rwone/fns87knc/

更新：我应该补充说，将会有许多具有相同类的列表，因此我需要专门针对＆＃34;此类的下一个实例从我点击的位置＆＃34;。

Answer 1

使用find()遍历div.one后，您可以使用parents()方法。但这种方式有点慢。

$("input.css-checkbox:checkbox").change(function() {
  if (this.checked) {
    // remove a class
    //var myVar = $(this).next($("li.area_01"));
    var myVar = $(this).parents(".one").find(".four").find("li.area_01");
    myVar.removeClass("common");
  } else if (!this.checked) {
    // add a class
    var myVar = $(this).parents(".one").find(".four").find("li.area_01");
    myVar.addClass("common");
  }
});

/* 

Desired Behaviour

On checking the checkbox, the first li's background should change to green.  

On unchecking the checkbox, the first li's background should change back to grey.  

*/

.area_01,
.area_02,
.area_03,
.area_04,
.area_05,
.area_06 {
  width: 100px;
  height: 20px;
}
.area_01 {
  background: green;
}
.area_02 {
  background: cyan;
}
.area_03 {
  background: yellow;
}
.area_04 {
  background: fuchsia;
}
.area_05 {
  background: purple;
}
.area_06 {
  background: lime;
}
li {
  margin-bottom: 5px;
}
.area_01.common,
.area_02.common,
.area_03.common,
.area_04.common,
.area_05.common,
.area_06.common {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="one">
  <div class="two">
    <p>31</p>
    <div class="three">
      <table>
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="css-checkbox" id="checkboxG1" name="checkboxG1">
              <label class="css-label" for="checkboxG1">area_01 - click me</label>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="four">
    <ul>
      <li class="area_01 common"></li>
      <li class="area_02 common"></li>
      <li class="area_03 common"></li>
      <li class="area_04 common"></li>
      <li class="area_05 common"></li>
      <li class="area_06 common"></li>
    </ul>
  </div>
</div>

Answer 2

DEMO

$("input.css-checkbox:checkbox").change(function () {
    if (this.checked) {
        console.log('checked');
        // remove a class
        //var myVar = $(this).next($("li.area_01"));
        var myVar = $(this).closest(".two").siblings('.four').find(".area_01");
        myVar.removeClass("common");
    } else if (!this.checked) {
        // add a class
        var myVar = $(this).closest(".two").siblings('.four').find(".area_01");
        myVar.addClass("common");
    }
});

/* 

Desired Behaviour

On checking the checkbox, the first li's background should change to green.  

On unchecking the checkbox, the first li's background should change back to grey.  

*/

试试这样。

我使用closest()选择了第二类的父div，然后使用siblings()找到包含第4类列表的兄弟，然后添加/删除类

Answer 3

如果要将类添加到 li 元素，可以使用以下步骤

1.将以下代码添加到JS文件中。如果选中该复选框，此代码将向 li 元素添加“common”类，否则将删除该类。

jQuery("input.css-checkbox:checkbox").change(function () {
        if (this.checked) {
            jQuery('.four ul li').addClass('common');
        }
        else
        {
           jQuery('.four ul li').removeClass('common');
        }
    });

2.在CSS文件中写下以下语句。

.common{
    background: red;
}

执行此操作后，从 li 元素中删除'common'类，因为我们将动态添加或删除它。

要查看此示例，请参阅此链接 - http://jsfiddle.net/r4zokodb/

如何在选中或取消选中复选框时删除或添加课程？

3 个答案: