Question

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

注意：我正在尝试将该类添加到子元素。每个回路的引脚盒都在a上。

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，您想要click() #like $(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"); });，如果是这样，

s2.reserve(10);

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

如果父元素具有chlid，则添加类onclick

5 个答案: