单击查找并替换图像src

时间:2015-09-28 07:09:43

标签: jquery

HTML:

 <div class="checkbox" rel="1" id="fr2"><img src="images/checkbox_off.png" class="ckbox" width="16" height="16">1917</div>
<div class="checkbox" rel="2" id="fr2"><img src="images/checkbox_off.png" class="ckbox" width="16" height="16">1957</div>
<div class="checkbox" rel="3" id="fr2"><img src="images/checkbox_off.png" class="ckbox" width="16" height="16">1997</div>
<input type="text" name="fr2_val" id="fr2_val" value="">

单击其中一个复选框div我要更改此单击的图像:

这就是我的jQuery:

$('.checkbox').click(function() {
            var wert = $(this).attr('rel');
            var id = $(this).attr('id');
            $('#'+id+'_val').val(wert);

            $(this).find('.ckbox').src.replace("_off", "_on");
        })

但它不能正常工作。如何更改点击的图像src?重置其他解决方案的最佳解决方案是什么?

感谢您的帮助

最好的问候 托马斯

1 个答案:

答案 0 :(得分:3)

您需要将已更改的src分配回复选框,您将获得$(this).find('.ckbox').src的字符串并更改它不会更改实际复选框的src。

chkbox = $(this).find('.ckbox');
chkbox.attr('src', chkbox.prop('src').replace("_off", "_on"));

或使用DOM对象而不是jQuery对象。您可以直接访问src并进行更改。

chkbox = $(this).find('.ckbox')[0];
chkbox.src = chkbox.src.replace("_off", "_on");

除此之外,我无法理解你为什么要为id为fr2_val的输入动态制作id