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

将父ul与子img分开，使用 closest() 或 parents() ，例如：< / p>

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

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

希望这有帮助。

＆＃13;

$("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"); 
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

将一个班级添加到祖父母的孩子img

1 个答案: