图像交换与进度条增加/减少单击

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为图像返回所需的源。

​

$(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>

​

Answer 2

问题是picSource仍然设置为更改的最后一个图像的src。

你让这种方式变得更复杂了，下面是一个简化的版本：

​

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

  $("#btn, #btn2").click(function() {
    // Get a reference to the appropriate image based on the id of the pushed button.
    var $img = this.id === 'btn' ? $("#mark-complete") : $("#mark-complete2");
    // Toggle the image.
    if ($img.attr("src") === notcomplete) {
      $img.attr("src", completed);
    } else {
      $img.attr("src", notcomplete);
    }
  });


  $("#pg1 input, #pg2 input").on('change', function() {
    if ($(this).is(":checked")) {
      progress = progress + 5;
    } else {
      progress = progress - 5;
    }
    $('#blips > .xp-progress').css("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>

​