我有一些带有复选框的图像。当我检查其中之一时,图像应该通过新类“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")
}
});
我知道我添加了一个类,但我如何调用这个元素呢?
最佳答案
使用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>
关于jquery - 为祖 parent 的 child 添加一个类(class) img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40868857/