带有进度条的图像交换可增加onclick或减少onclick

时间:2019-05-03 21:05:06

标签: javascript jquery html css

我正在尝试单击按钮时创建带有进度条增加/减少的图像交换。第一个问题在起作用,但是第二个问题不在起作用。在第二个图像上,单击拳头按钮(“标记已完成”)后,图像将不会交换。

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

2 个答案:

答案 0 :(得分:0)

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>

答案 1 :(得分:0)

问题是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>