Question

我想用我的图像制作单选按钮。所以我这样定义我的div：

<div id="LabBox">
    <img class="dlike" alt="dlike" src="images/dlike_OFF.png"/>
    <img class="check" alt="check" src="images/check_OFF.png"/>
    <img class="funny" alt="funny" src="images/funny_OFF.png"/>
    <img class="idea" alt="idea" src="images/idea_OFF.png"/>
    <img class="imp" alt="imp" src="images/imp_OFF.png"/>

</div>

我想在文件名中切换。所以我使用了以下jqueqy代码：

  $("#LabBox img").click(function () {

var src;    
var srcname = $(this).attr("src");


    // turn on!
if(srcname.toLowerCase().indexOf("off") >= 0){

    //(e.g images/dlike_OFF.png -> images/dlike_ON.png)
src = $(this).attr("src").replace("OFF", "ON");  
    $(this).attr("src", src);   
}   
    // All others turn off! for other words src swap.
  var src2 =$(this).siblings().attr("src").replace("ON", "OFF");
   // All images are the same pic. why?? ---> src="images/dlike_OFF.png"
  console.log(src2);
  $("#LabBox img").attr("src",src2);

    });

问题在于我想要替换所有兄弟＆＃34;我选择的标签（图片）。所有img更改为相同的img，这是＆＃34; images / dlike_OFF.png＆＃34; （第一）。如何使用兄弟姐妹改变我的img（）？或者我如何调整我的脚本以交换所有图像？

Answer 1

$("#LabBox img").click(function () {
    if (this.src.indexOf('OFF') != -1) {
        this.src = this.src.replace('OFF', 'ON');
    }
    $(this).siblings().attr('src', function(i,src) {
        return src.replace('ON', 'OFF')
    });
});

Answer 2

的 LIVE DEMO

$("#labBox").on('click','img[src$=OFF]',function () { this.src = this.src.replace('OFF', 'ON'); $(this).siblings().each(function(){ this.src = this.src.replace('ON', 'OFF'); }); });

jQuery与兄弟姐妹交换img

2 个答案: