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