Question

我正在尝试使其能够在两个弹出图像之间移动。任一图像都能正确弹出。

如何使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。

如果/其他语句不起作用-仅一个图像按钮有效

0 个答案: