Question

jquery 多个 <div> 点击当前的</div>后，只改变当前的<div>的样式.该怎么写？是点击

$(".sp_xz ul li").each(function (i) {
this.index = i;
$(".sp_xz ul li p").click(function(){ //mouseover变成了click点击了后变成2px吧
$(".li_P1").eq(this.index).css({'border':'#F60 solid 2px'
})
});
以前是移入移出，现在变成点击该怎么做？？？？
$(".sp_xz ul li p").mouseout(function(){
$(".li_P1").eq(this.index).css({'border':'#ccc solid 1px'})
});
/*口味选择*/
$(".sp_xz ul li").each(function (i) {
this.index = i;
$(".sp_xz ul li").click(function(){
$(".sp_xz ul li").eq(this.index).css({'background':'url(images/sp_xz.png)'})
$(".sp_xz ul li").eq(this.index).unbind();
});
------下面不是问题 上面↑↑↑↑↑↑↑↑我要的是点击弹出的图片唯一，不重复出现多个-----
$(".sp_xz ul li").mouseover(function(){
$(".li_P1").eq(this.index).css({'border':'#F60 solid 2px'})
});
$(".sp_xz ul li").mouseout(function(){
$(".li_P1").eq(this.index).css({'border':'#ccc solid 1px'})
});
});

Answer 1

把mouseover，mouseout改成click，建议把要修改的CSS写样类样式，写好后用hasClass判断当前是什么样式，然后再根据当前样式做不同的变换。

Answer 2

搞不懂，你咋在点击事件外边还要迭代一次呢，直接：

$(function(){
    $(".sp_xz ul li p").click(function(){                             
        $(".li_P1").eq($(this).parent().index()).css({'border':'#F60 solid 2px'     
     })  
})

 还有就是，为什么不直接在每个div块上直接click,而要通过点击其他的元素来控制.li_p1的样式呢？

Answer 3

你好!!

$(".sp_xz ul li").click(function (i) {
    $(this).siblings().css("background","").end()
           .css("background","'url(images/sp_xz.png)'");
});