onclick 替换 src 中编号较小的所有图像 (jQuery)

Question

我有一个由 10 张图片组成的温度计。我想更改温度计 onclick 的每个部分（图像），例如如果你点击第三张图片（等于 30 度），它下面的图片（thermo2 和 thermo1）也会改变。这适用于以下（公认的麻烦）代码：

<img src="thermo01_off.png" id="thermo1" class="img-swap" alt="10°" width="157" height="33" />
<img src="thermo01_off.png" id="thermo2" class="img-swap" alt="20°" width="157" height="33" />
<img src="thermo03_off.png" id="thermo3" class="img-swap" alt="30°" width="157" height="33" />
... and so on

$(function(){
    $(".img-swap").on('click', function() {
       if ($(this).attr("id") == "thermo1") {
           thermo1.src = thermo1.src.replace("_off","_on");
       } else if ($(this).attr("id") == "thermo2") {
           thermo1.src = thermo1.src.replace("_off","_on");
           thermo2.src = thermo2.src.replace("_off","_on");
       } else if ($(this).attr("id") == "thermo3") {
           thermo1.src = thermo1.src.replace("_off","_on");
           thermo2.src = thermo2.src.replace("_off","_on");
           thermo3.src = thermo3.src.replace("_off","_on");
       }
 });

问题 1 目前，图像不会切换回来。我知道你可以使用 "toggleClass"，但我不确定如何在上面的代码中实现。

问题2 如果我对所有 10 个温度计图像执行上述代码，它会变得很长。必须有一种更有效的方式来编写上述内容。任何建议。

解决方案 这段代码最终起作用了，还要感谢 Gregg。

$(function() {
  $("[id^=thermo]").click(function() {
    var notid, thisid, new_url, not_url = "";
    var $this = $(this);

    //Get the ID without the "thermo" part
    thisid = $this.attr('id').replace('thermo', '');

    //swap image that was clicked
    new_url = $this.attr('src').replace("_off", "_on");
    $(".img-swap" + thisid).attr("src", new_url);

    //replaces all images that were NOT clicked
    $("[id^=thermo]").not(this).attr('id', function(i, idx) {

        //get ids of those not clicked
        notid = idx.replace('thermo', '');

        //change src of images with lower ids than the clicked one
        if (notid < thisid) {
            not_url = $(".img-swap" + notid).attr('src').replace("_off", "_on");
            console.log(notid);
            $(".img-swap" + notid).attr("src", not_url);
        } else {
            not_url = $(".img-swap" + notid).attr('src').replace("_on", "_off");
            $(".img-swap" + notid).attr("src", not_url);
        }
    });
});

});

Answer 1

像这样的东西应该可以工作：

$(function(){
// add click event listener to all imgs with id starting with 'thermo'
$('img[id^="thermo"]').click(function(){
    // get the index of the clicked element in the array of all matching elements
    var idx = $(this).index();
    // edit the src of the elements with an index less than the clicked element
    $.each($('img[id^="thermo"]'), function(i, img){
        if($(img).index() <= idx){
            $(img).attr('src', $(img).attr('id') + '_on');
        }else{
            $(img).attr('src', $(img).attr('id') + '_off');
        }
    });
});

});

编辑：只要图片的 ID 与示例 html 所示的图片文件的名称相同。这将工作。我将其更改为循环并使用 ID 设置图像 src。

onclick 替换 src 中编号较小的所有图像 (jQuery)

onclick replaces all images with lower number in src (jQuery)

jquery

image

onclick

toggleclass