javascript - 带有进度条的图像交换增加/减少onclick

Question

我正在尝试创建图像交换，当单击按钮时进度条会增加/减少。第一个问题有效，但第二个问题无效。在第二个上，单击第一个按钮(“标记完成”)后图像不会交换。

$(document).ready(function($){
    var progress = 20;
    var picSource = document.getElementById("mark-complete").src;	
var notcomplete = "https://www.w3schools.com/images/picture.jpg";
var completed = "https://www.w3schools.com/images/lamp.jpg";		    


function changePic() {
  if (picSource == notcomplete) {
    picSource = completed;
  } else {
    picSource = notcomplete;
  }
}
document.getElementById("btn").onclick = function() {
  changePic();
  document.getElementById("mark-complete").src = picSource;	
}
document.getElementById("btn2").onclick = function() {
  changePic();
  document.getElementById("mark-complete2").src = picSource;	
}


    $("#pg1 input").on('change', function(){
        if ($("#pg1 input").is(":checked") === true) {
        progress = progress+5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
        else if ($("#pg1 input").is(":checked") === false) {
        progress = progress-5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
    });
	
   $("#pg2 input").on('change', function(){
        if ($("#pg2 input").is(":checked") === true) {
        progress = progress+5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
        else if ($("#pg2 input").is(":checked") === false) {
        progress = progress-5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
    });

});

.xp-progress { background-color: darkred;
    height: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
          <div class="xp-progress" role="progressbar" style="width:20%">
            <span class="sr-only" style="color:blue;"></span>
          </div>
        </div>
        

<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
  <input type="checkbox" id="btn"  style="display:none;">
</label>


<hr>
<p></p>                    
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">

<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
  <input type="checkbox" id="btn2"  style="display:none;">
</label>

我知道它与“getelementbyid”有关，但我做错了什么？ 这是演示:https://plnkr.co/UGWOqpdeCDhXuS9MMXfI

Answer 1

picSource 始终等于您的第一张图片的路径 (document.getElementById("mark-complete").src)。 您需要将当前图像传递给 changePic 并在单击事件时进行比较。更新的 changePic 返回图像所需的 src。

$(document).ready(function($){
  var progress = 20;    
  var notcomplete = "https://www.w3schools.com/images/picture.jpg";
  var completed = "https://www.w3schools.com/images/lamp.jpg";		    

  function changePic(source) {
    if (source == notcomplete) {
      return completed;
    } else {
      return notcomplete;
    }
  }
document.getElementById("btn").onclick = function() {  
  var imgSrc=document.getElementById("mark-complete").src;
  document.getElementById("mark-complete").src = changePic(imgSrc);	
}
document.getElementById("btn2").onclick = function() {
  var imgSrc=document.getElementById("mark-complete2").src;
  document.getElementById("mark-complete2").src = changePic(imgSrc);	
}


    $("#pg1 input").on('change', function(){
        if ($("#pg1 input").is(":checked") === true) {
        progress = progress+5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
        else if ($("#pg1 input").is(":checked") === false) {
        progress = progress-5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
    });
	
   $("#pg2 input").on('change', function(){
        if ($("#pg2 input").is(":checked") === true) {
        progress = progress+5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
        else if ($("#pg2 input").is(":checked") === false) {
        progress = progress-5;
        $('#blips > .xp-progress').attr("style","width:" + progress + "%");
        }
    });

});

.xp-progress { background-color: darkred;
    height: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blips" class="xp-line">
          <div class="xp-progress" role="progressbar" style="width:20%">
            <span class="sr-only" style="color:blue;"></span>
          </div>
        </div>
        

<img id="mark-complete" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">
<hr>
<p></p>
<label id="pg1" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!
  <input type="checkbox" id="btn"  style="display:none;">
</label>


<hr>
<p></p>                    
<img id="mark-complete2" src="https://www.w3schools.com/images/picture.jpg" style="width:80px; float: right;">

<label id="pg2" style="cursor:pointer;border:2px solid grey; padding: 5px 10px; border-radius: 4px;">Mark Completed!2
  <input type="checkbox" id="btn2"  style="display:none;">
</label>