jQuery 无法添加类或删除类

Question

我在 Laravel 中使用 vuejs，在 watch 操作中，我使用 Jquery。

我不知道为什么 hasClass 可以工作，但 addClass、removeClass 和toggleClass 却不能。

这是我的 HTML 代码:

$('#todo input[type=checkbox]:not(:checked)').each(function(i, elem) {
  var p = $(elem).parent().find('p');
  if (p.hasClass("checked")) {
    p.removeClass("checked");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-check d-flex flex-row pl-2 b-bottom">
  <input type="checkbox" id="sec1To0_chk_msk01" v-model="data.sec1To0_chk_msk01" class="d-none form-check-input" v-if="allow_staff" />
  <label for="sec1To0_chk_msk01" class="form-check-label d-flex pt-2">
        <div class="radio-check d-flex justify-content-center align-items-center">
          <span class="ni ni-check"></span>
        </div>
      </label>
  <p v-bind:class="{ checked:checked }" class="w-100 p-1 m-0">Title</p>
</div>

Answer 1

我不确定你所说的“它不起作用”是什么意思。所以我猜测这个问题并提供一个可能的解决方案......

事实上，它正在发挥作用。但是 - 您的 js 代码片段仅在页面加载/dom 准备好时执行一次。我假设您想要您的 <p>切换类的元素 checked每当复选框被选中或取消选中时。为此，您需要将事件触发器绑定(bind)到复选框，以便每次选中/取消选中该框时都会执行 js。

这将像这样完成:

//function to execute on every click event of a checkbox
$("input[type=checkbox]").on("click", function(){       
    //instead of using .parent().find() you can simply use .siblings() to find the p element
    myTextElem = $(this).siblings("p");  

    // toggle the class
    myTextElem.toggleClass("checked");

    if(myTextElem.hasClass("checked")){
      // here you can do something, if it is checked
    } else {
      // here you can do something, if it is unchecked
    }
});

这当然只有在选中的类和复选框状态同步的情况下才有效。因此，通过点击功能，您的p即使默认情况下选中复选框，元素也不会加载选中的类。为此，您需要添加一些代码，以便在 dom 就绪时执行:

$("input[type=checkbox]").each(function(){ //loop through all checkboxes
  myTextElem = $(this).siblings("p"); //select sibling text elem
  if($(this).is(":checked")){ //if checkbox is checked
    myTextElem.addClass("checked"); //initially add class checked
  }
});