给祖父母的孩子添加一个班级 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>