将 class 添加到祖父母的 child img

Question

我有一些带复选框的图片。当我检查其中一个时，图像应该通过新的 class "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")
    }
});

我知道我错了，我添加了一个 class，但是我该如何调用这个元素？

Answer 1

通过将父项 ul 与子项 img 分开来使用 closest() or parents()，例如：

$(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>

将 class 添加到祖父母的 child img

Add a class to a grandparent's child img

jquery

class

parent