我具有一个可在单击时切换图像src的功能,但是,我需要确保它们不能连续多次单击同一张照片,以使图像1不会丢失。再加上将来还需要发生一些其他事情。
现在的问题是我正在尽力做到这一点,但仍然无法解决。它以某种方式停留在第一个if
中
这是我的代码:
var countSwitch = 0;
if(countSwitch == 0){
$('.display-img').click(function(){
countSwitch++;
selectImg = $(this).find('img').attr('src');
$(this).addClass('last-clicked');
currentImg = $('.prime-img img').attr('src');
$(this).find('img').attr('src', currentImg);
$('.prime-img img').fadeOut(400, function() {
$('.prime-img img').attr('src', selectImg);
}).fadeIn(400);
console.log('eerste count', countSwitch);
console.log('eerste');
});
}
if(countSwitch >= 0){
$('.display-img').click(function(){
$('figure').removeClass('last-clicked');
$(this).addClass('last-clicked');
selectImg = $(this).find('img').attr('src');
currentImg = $('.prime-img img').attr('src');
$(this).find('img').attr('src', currentImg);
$('.prime-img img').fadeOut(400, function() {
$('.prime-img img').attr('src', selectImg);
}).fadeIn(400);
console.log('2e');
console.log('2e count', countSwitch);
});
}
最佳答案
您需要将countSwitch变量if语句放入click事件中:
var countSwitch = 0;
$('.display-img').click(function(){
if(countSwitch == 0) {
countSwitch++;
selectImg = $(this).find('img').attr('src');
$(this).addClass('last-clicked');
currentImg = $('.prime-img img').attr('src');
$(this).find('img').attr('src', currentImg);
$('.prime-img img').fadeOut(400, function() {
$('.prime-img img').attr('src', selectImg);
}).fadeIn(400);
console.log('eerste count', countSwitch);
console.log('eerste');
} else {
$('figure').removeClass('last-clicked');
$(this).addClass('last-clicked');
selectImg = $(this).find('img').attr('src');
currentImg = $('.prime-img img').attr('src');
$(this).find('img').attr('src', currentImg);
$('.prime-img img').fadeOut(400, function() {
$('.prime-img img').attr('src', selectImg);
}).fadeIn(400);
console.log('2e');
console.log('2e count', countSwitch);
}
});
关于javascript - 第一次单击时执行第一个功能,其他单击时执行其他功能,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35696414/