jquery - 为祖 parent 的 child 添加一个类(class) img

Question

我有一些带有复选框的图像。当我检查其中之一时，图像应该通过新类“change-img”进行更改。这是一个代码:

<ul>
    <li class="tech-vis"><img class="tech-img" src="..." alt="..."/></li>
    <li class="check-tech"><input id="const-tech" class="checkbox-form inside"  type="checkbox" name="tech[]" value="value1" /></li>                                                    
</ul>
<ul>
    <li class="tech-vis"><img class="tech-img" src="..." alt="..."/></li>
    <li class="check-tech"><input id="const-tech" class="checkbox-form inside"  type="checkbox" name="tech[]" value="value2" /></li>                                                    
</ul>
... and etc.

还有一个脚本:

$("ul input[type=checkbox].inside").click(function() {
    if($(this).is(":checked")) {
        $(this).parents("ul img.tech-img").addClass("change-img");
    }
    else {
        $("img.tech-img").removeClass("change-img")
    }
});

我知道我添加了一个类，但我如何调用这个元素呢？

Answer 1

使用closest() 或 parents() 通过将父 ul 与子 img 分开，例如:

$(this).closest("ul").find('img.tech-img').addClass("change-img");
//Or
$(this).parents("ul").find('img.tech-img').addClass("change-img");

注意:请注意，id 在同一文档中应该是唯一的。

希望这有帮助。

$("ul input[type=checkbox].inside").click(function() {
  var parent = $(this).parents("ul");

  if($(this).is(":checked")) {
    parent.find('img.tech-img').addClass("change-img");
  }
  else {
    //Remove class from all img tags
    $("img.tech-img").removeClass("change-img"); 

    //Remove class from related img tag
    //parent.find('img.tech-img').removeClass("change-img"); 
  }
});

.change-img{
   background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="tech-vis"><img class="tech-img" src="http://hytorcatlantique.fr/wp-content/uploads/2014/11/android-icon.png" alt="..."/></li>
  <li class="check-tech"><input id="const-tech1" class="checkbox-form inside"  type="checkbox" name="tech[]" value="value1" /></li>                                                    
</ul>
<ul>
  <li class="tech-vis"><img class="tech-img" src="http://hytorcatlantique.fr/wp-content/uploads/2014/11/android-icon.png" alt="..."/></li>
  <li class="check-tech"><input id="const-tech2" class="checkbox-form inside"  type="checkbox" name="tech[]" value="value2" /></li>                                                    
</ul>