如果父元素有子元素，则添加 class onclick

Question

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

注意：我正在尝试将 class 添加到子元素。引脚框在每个循环上。

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

您需要使用：

var pingrid= $('.pinGrid');
$("#like").click(function () { 
 if(pingrid.hasClass( "#pin" ))
   pingrid.find('#pin').toggleClass("pincard-checked"); 
});

Answer 2

我假设，如果 .pinGrid 有 #pin，你想解雇 #like 的 click()，如果是这样的话，

$(document).ready(function(){ 
   $("#like").click(function () { 
     //YOUR ACTION
   }); 


   ($('.pinGrid #pin').length>0)?$("#like").trigger("click"):alert("NOT FOUND");

   //IF YOU WANT TO ADD CLASS
   //($('.pinGrid #pin').length>0)?$("#pin").addClass("pincard-checked"):alert("NOT FOUND");

});

Answer 3

您可以只使用 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>

Answer 4

<!DOCTYPE html>
<html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
    .my_class {
        color:red;
    }


</style>

<script>


    $(document).ready(function () {
        $("#like").click(function () {

            if ($('.pinGrid #pin1').length > 0) {
                $('.pinGrid #pin1').toggleClass("my_class")
            }

        });
    });



</script>

<body>
<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>
 </body>
</html>

Answer 5

你只需要更换

$('.pinGrid').has( "#pin" ).toggleClass("pincard-checked");

与

$('.pinGrid').find( ".pin" ).toggleClass("pincard-checked");

这是fiddle link

如果父元素有子元素，则添加 class onclick

if a parent element has a chlid then add class onclick

javascript

jquery

parent-child