我试图做一个简单的removeClass和addClass来改变Img上的样式。
<div id="Pic_Viewer">
<div id="Main_Pic_Viewer">
<div class="Not_Selected" >
<img src='#' alt="PicURL_1" />
</div>
<div class="Not_Selected" >
<img src='#' alt="PicURL_2" />
</div>
</div>
<div id="Small_Pic_Viewer">
<ul>
<li>
<img class="Small_Pic" src'#' alt="PicURL_1" />
</li>
<li>
<img class="Small_Pic" src='#' alt="PicURL_2" />
</li>
</ul>
</div>
</div>
我尝试使用div内的#Main_Pic_Viewer img和没有。
JS:
$('#Small_Pic_Viewer ul li').click(
function () {
var ThisLI = this.firstElementChild.alt;
var BigImgDiv = $('#Main_Pic_Viewer div');
var CurDiv;
for (var i = 0, l = BigImgDiv.length; i < l; i++) {
CurDiv = BigImgDiv[i];
if (BigImgDiv[i].children[0].alt === ThisLI) {
CurDiv.removeClass('Not_Selected').addClass('Selected');
} else {
CurDiv.removeClass('Selected');
};
};
}
);
不确定为什么我会收到此错误消息,因为removeClass()在其他方法中正常工作。
答案 0 :(得分:6)
在jQuery对象中使用数字索引时,您将获得没有jQuery包装器的原始DOM元素。
只需在jQuery函数中再次包装它就可以了:
// ...
CurDiv = $( BigImgDiv[i] );
// ...
@Andreas在评论中提出的另一个解决方案是使用eq()
方法,这可能是更好的方法:
// ...
CurDiv = BigImgDiv.eq(i);
// ...
答案 1 :(得分:0)
试试这个:http://jsfiddle.net/Yx5c8/1/
$('#Small_Pic_Viewer ul li').click(function () {
var ThisLI = this.firstElementChild.alt;
$('#Main_Pic_Viewer div').each(function () {
if (this.children[0].alt === ThisLI) {
$(this).removeClass('Not_Selected').addClass('Selected');
} else {
$(this).removeClass('Selected');
}
});
});