在悬停时更改文字

Question

我想将所选输入的文字更改为ccc。我尝试使用.hover，但什么都没发生。

$(function() {
  $(".xxx").each(function() {
    $(this).on("click", function() {
      if ($(this).is(":checked")) {
        $(this).next().html("bbb");
        $(this).parents(".checkbox").toggleClass("selected");
      } else {
        $(this).next().html("aaa");
        $(this).parents(".checkbox").toggleClass("selected");
      } 
    });
  });
  $(".checkbox.selected").each(function() {
    $(this)
    .on("mouseover", function() {
      $(this).find("p").html("ccc");
    })
    .on("mouseout", function() {
      $(this).find("p").html("bbb");
    });
  });
});

.checkbox.selected:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label>
    <input class="xxx" type="checkbox"/>                     
    <p>aaa</p>
  </label>
</div>
<div class="checkbox">
  <label>
    <input class="xxx" type="checkbox"/>                     
    <p>aaa</p>
  </label>
</div>

Answer 1

这将返回一个空的jQuery集合，因为运行时没有复选框具有selected类：

$(".checkbox.selected")

相反，您可以使用 delegated 事件处理程序，如下所示：

$(document)
  .on('mouseover', '.checkbox.selected', function() {
    $(this).find("p").html("ccc");
  })
  .on('mouseout', '.checkbox.selected', function() {
    $(this).find("p").html("bbb");
  });

<强>段

$(function() {
  $(".xxx").each(function() {
    $(this).on("click", function() {
      if ($(this).is(":checked")) {
        $(this).next().html("bbb");
        $(this).parents(".checkbox").toggleClass("selected");
      } else {
        $(this).next().html("aaa");
        $(this).parents(".checkbox").toggleClass("selected");
      } 
    });
  });
  
  $(document)
    .on('mouseover', '.checkbox.selected', function() {
      $(this).find("p").html("ccc");
    })
    .on('mouseout', '.checkbox.selected', function() {
      $(this).find("p").html("bbb");
    });
});

.checkbox.selected:hover {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
  <label>
    <input class="xxx" type="checkbox"/>                     
    <p>aaa</p>
  </label>
</div>
<div class="checkbox">
  <label>
    <input class="xxx" type="checkbox"/>                     
    <p>aaa</p>
  </label>
</div>