如何使用jquery更改其他选定的元素样式

时间:2015-12-06 12:15:55

标签: jquery colors border siblings

我的html主体中有5个图像,当用户点击其中一个时,jquery更改了点击图像的样式和未单击图像的样式

例如用户通过img_choose1点击图片,img_choose1边框将变为蓝色,但问题在于其他图片边框不会变为红色 怎么办?

for (var i=1; i <= 5; i++) {
    $(body).append('<img  id="img_choose'+i+'" height="100" src="a'+i+'.jpg"/>');
}

$("[id^='img_choose']").click(function() {
    $(this).css("border","rgba(70,70,180,0.5) medium solid");

    //$(this).siblings().css("border","rgba(160,20,70,0.5) medium solid");
    // It don't change other selected elements border color
})

1 个答案:

答案 0 :(得分:1)

试试 DEMO

for (i=1; i <= 5; i++) {
    $('body').append('<img id="img_choose'+i+'" src="http://placehold.it/350x150" alt="">');
}

$('img').click(function() {
  $(this).css('border', '1px solid blue');
  $(this).siblings().css('border', '1px solid red');
});