javascript - 如果父元素有子元素则添加 onclick 类

Question

我正在尝试编写一个脚本，如果父元素有一个 chlid，则添加 onlick 类，这就是我到目前为止所得到的。任何帮助将不胜感激，附:我知道很多代码都很糟糕:父元素是“.pinGrid”，子元素是“#pin”，onclick 是“#like”

注意:我正在尝试将类添加到子元素中。引脚框位于每个循环上。

JS:

$(document).ready(function(){ 
   $("#like").click(function () { 
     $('.pinGrid').has( "#pin" ).toggleClass("pincard-checked"); 
   }); 
});

HTML:

<div class="pinGridWrapper">
 <div class="pinGrid">

<div class="pin" id="pin1">
  <div class="pull-right intrest-box">
    <input type="checkbox" class="faChkRnd" name="c1" id="like">
    <label></label>
  </div>
  <p class="pull-left"> </p>
  <!-- date -->
  <h2> Title </h2>
  <!-- title-->
  <p><b>INFO:</b>
    <br>
  </p>
  <div class="text-center">
    <p class="card-title"><a href="" class="">Click</a></p>
    </div>
   </div>


</div>
</div>

Answer 1

您可以只使用ID选择器来获取子元素，然后使用toggleClass()和选中状态

$(document).ready(function() {
  $(".like").change(function() {
    $(this).closest('.pin').toggleClass("pincard-checked", this.checked);
  });
});

.pincard-checked {
  background-color: lightgrey;
}
.pin {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pinGridWrapper">
  <div class="pinGrid">
    <div class="pin">
      <div class="pull-right intrest-box">
        <input type="checkbox" class="faChkRnd like" name="c1">
        <label></label>
      </div>
      <p class="pull-left"></p>
      <!-- date -->
      <h2> Title </h2>
      <!-- title-->
      <p><b>INFO:</b>
        <br>
      </p>
      <div class="text-center">
        <p class="card-title"><a href="" class="">Click</a>
        </p>
      </div>
    </div>
    <div class="pin">
      <div class="pull-right intrest-box">
        <input type="checkbox" class="faChkRnd like" name="c1">
        <label></label>
      </div>
      <p class="pull-left"></p>
      <!-- date -->
      <h2> Title </h2>
      <!-- title-->
      <p><b>INFO:</b>
        <br>
      </p>
      <div class="text-center">
        <p class="card-title"><a href="" class="">Click</a>
        </p>
      </div>
    </div>
    <div class="pin">
      <div class="pull-right intrest-box">
        <input type="checkbox" class="faChkRnd like" name="c1">
        <label></label>
      </div>
      <p class="pull-left"></p>
      <!-- date -->
      <h2> Title </h2>
      <!-- title-->
      <p><b>INFO:</b>
        <br>
      </p>
      <div class="text-center">
        <p class="card-title"><a href="" class="">Click</a>
        </p>
      </div>
    </div>
  </div>
</div>