Question

我在Laravel中使用vuejs，在观看动作中，我使用了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代码段仅执行一次，页面加载 /准备就绪。我假设您希望您的<p>元素在复选框被选中或未选中时切换类checked。为此，您需要将事件触发器绑定到您的复选框，以便每次执行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
    }
});

这当然仅在选中的类和复选框状态已同步的情况下有效。因此，使用click函数，即使默认情况下选中了该复选框，您的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
  }
});

jQuery无法添加类或删除类

1 个答案: