如何在带有jQuery $$ this的复选框后选择跨度

Question

当我单击复选框时，我想要更改跨度中“ Publicera”文本的颜色。

无论我尝试什么，我都无法正常工作。而且我不明白为什么这行不通？

$$(this).closest("div").find(".pub1").css('color','red');

<div class="item-subtitle">                   
  <label class="checkbox">
    <input type="checkbox">
    <i class="icon-checkbox"></i>
  </label>&nbsp;
  <span class="pub1" style="color:#0CF;">Publicera</span> 
</div>

因此，我们非常感谢任何投入。谢谢。

Answer 1

你的意思是这样吗

$('[type="checkbox"]').on("change", function() {
  $(this).closest("div").find(".pub1").attr("style", "").css('color', 'red');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-subtitle">
  <label class="checkbox">
    <input type="checkbox">
    <i class="icon-checkbox"></i>
  <span class="pub1" style="color:#0CF;">Publicera</span>
    </label>&nbsp;
</div>

或类似的

$('[type="checkbox"]').on("change", function() {
  $(this).closest("div").find(".pub1").toggleClass("cyan red")
})

.red {
  color: red
}

.cyan {
  color: #0CF
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-subtitle">
  <label class="checkbox">
    <input type="checkbox">
    <i class="icon-checkbox"></i>
  <span class="pub1 cyan">Publicera</span>
    </label>&nbsp;
</div>

Answer 2

您必须为复选框定义事件更改

   $("#checkBox").change(function () {
        $("div > .pub1").css('color','red');
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-subtitle">

    <label class="checkbox">
        <input type="checkbox" id="checkBox">
        <i class="icon-checkbox"></i>
    </label>&nbsp;
    <span class="pub1" style="color:#0CF;">Publicera</span>
</div>