我正在尝试使其能够在两个弹出图像之间移动。任一图像都能正确弹出。
如何使if / else语句的第一部分和第二部分都可以工作(右箭头在两个图像中如何工作)?
我进行的先前研究包括Google搜索。以下大多数代码都是直接从youtube上的视频获得或获得帮助的。
$(function() {
"use strict";
$('.postOneImageOne, .postTwoImageOne, .postTwoImageTwo').click(function () {
var $src=$(this).attr('src');
$('.show').fadeIn();
$('.img-show img').attr('src', $src);
});
$('span').click(function () {
$('.show').fadeOut();
});
$('.next').on('click', function() {
// This loops through each img tag
$('img').each(function(){
// Now you can use $(this) to look at each img tag's class
if ($(this).hasClass('postTwoImageOne')) {
console.log('if works');
var $src2 = $('.postTwoImageTwo').attr('src');
$('.img-show img').attr("src", $src2);
} else if ($(this).hasClass('postTwoImageTwo')) {
console.log('else works');
var $src3 = $('.postTwoImageOne').attr('src');
$('.img-show img').attr('src', $src3);
}
});
});
});
$posts.=
"<div class='container'>
<div class='form'>
<img class='profilePicture' src='P2Includes/monkey2.jpg' alt='profilePicture' >
<h1>$title</h1>
<h2>$$price</h2>
<h3>$user_uid</h3>
<h4>$date</h4>
<textarea readonly rows='9' cols='62'>$content</textarea>
<div class='postImageContainer'>
<img class='postTwoImageOne active' src='P2Includes/purplespace.jpg'
alt='postPicture'>
<img class='postTwoImageTwo' src='P2Includes/puppy.png' alt='postPicture'>
</div>
</div>
</div>
<div class='show'>
<div class='overlay'></div>
<div class='img-show'>
<span>+</span>
<div class='previous' id='previous'>V</div>
<div class='next' id='next'>V</div>
<img src=''>
</div>
</div>";
当我尝试通过单击向右箭头从第一张图片移至下一张图片时,在控制台中出现7次“如果其他方法有用”,并且箭头不起作用。但是,当我尝试单击第二个图像中的下一个向右/下一个箭头时,在控制台中会出现七次“如果其他方法可行”的提示,并且该箭头确实起作用。在JavaScript下方,我在while循环中回显了$ posts。