removeClass和removeClass映像无法正常工作
removeClass和removeClass映像无法正常工作
提问于 2017-04-20 15:41:38
同级(‘.xx’)中是否有错误？点击时不想重复图片对不起，我的英语太差了:(
$(document).ready(function() {
//$(".ok").removeClass("imga");
//$('.ok2').removeClass('imga').siblings('.ok2').addClass("imga");
$('.item').click(function() {
var id = $(this).attr('id');
var xx = "ok" + id;
$('.ok' + id).removeClass('imga').siblings('.xx').addClass("imga");
$(this).addClass('active').siblings().removeClass('active');
});
});.active {
font-weight: 900;
color: blue;
}
.hover {
color: blue;
}
.imga {
-webkit-filter: grayscale(1);
filter: grayscale(1);
margin: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1">
<img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>
image 1
</div>
<div class="item" id="2" width="50" width="50">
<img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>
image 2
</div>
<div class="item" id="3" width="50" width="50">
<img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>
image 3
</div>
回答 3
Stack Overflow用户
发布于 2017-04-20 15:47:45
为什么不使用active类来改变图像的显示呢？
$('.item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});.active{
font-weight:900;
color:blue;
}
.item:not(.active) img {
-webkit-filter: grayscale(1);
filter: grayscale(1);
margin:auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1"><img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 1</div>
<div class="item" id="2" width="50" width="50"><img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 2</div>
<div class="item" id="3" width="50" width="50"><img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 3</div>
Stack Overflow用户
发布于 2017-04-20 15:47:57
您不需要it，您只需将类添加到所有img中，然后为当前类删除它
$(document).ready(function() {
$('.item').click(function() {
$(this).addClass('active').siblings().removeClass('active');
$('.item img').addClass('imga');
$(this).find('img').removeClass('imga');
});
});.active {
font-weight: 900;
color: blue;
}
.hover {
color: blue;
}
.imga {
-webkit-filter: grayscale(1);
filter: grayscale(1);
margin: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1"><img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 1</div>
<div class="item" id="2" width="50" width="50"><img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 2</div>
<div class="item" id="3" width="50" width="50"><img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>image 3</div>
Stack Overflow用户
发布于 2017-04-20 16:22:05
$(document).ready(function() {
$('.item').click(function() {
var $this = $(this);
$this.children().removeClass('imga').end().addClass('active');
$this.siblings().removeClass('active').children('img').addClass('imga');
});
});.active {
font-weight: 900;
color: blue;
}
.hover {
color: blue;
}
.imga {
-webkit-filter: grayscale(1);
filter: grayscale(1);
margin: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item" id="1">
<img class="ok1 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>
image 1
</div>
<div class="item" id="2" width="50" width="50">
<img class="ok2 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>
image 2
</div>
<div class="item" id="3" width="50" width="50">
<img class="ok3 imga" src="http://icons.iconarchive.com/icons/ampeross/qetto/128/icon-developer-icon.png"><br>
image 3
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43513167
复制相关文章
相似问题
腾讯云开发者
