javascript - 如何在 jQuery 运行时更改图像

Question

我需要使用jQuery更改每次点击的图像，假设页面第一次加载时它将是img1，当我单击img1时它将是img2，如果我再次单击img2它将是img2 1、这一切应该继续下去……代码:

          <div>
           <span class="myimage">
          <img class="img1"src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
         <img class="img2"src="abcd.jpg" alt="" />
           </span>
            <div>
              <span>
                Hello
            </span>
           <ul class="myul">
              <li>one</li>
          <li>Two</li>
              </ul>
           </div>
           <span class="myimage">
          <img class="img1"src="8A7FA0A1FFEC5443785B9B29AF7629.jpg" alt="" />
          <img class="img2"src="abcd.jpg" alt="" />
          </span>
            <div>
              <span>
               r u there
           </span>
          <ul class="myul">
            <li>three</li>
                <li>four</li>
                </ul>
             </div>
             </div>

jQuery:

 $(document).ready(function() {

        $(".myul").hide();

        $(".myimage").click(function() {

            if ($(".img2").is(":hidden")) {
                $(this).next("div").find(".myul").slideToggle(600);

                $(".img1").hide();
                $(".img2").show();
            }
            else {

               $(this).next("div").find(".myul").slideToggle(600);
               $(".img2").hide();
                $(".img1").show();

            }

        });
    });

但问题是，由于类相同，两个部分都拍摄相同的图像。当我单击第一部分时，仅应更改第一部分的图像，如何做......任何建议

Answer 1

您可以将上下文添加到选择器中。

例如 $(".img1") 变为 $(".img1", this)

$(document).ready(function() {

    $(".myul").hide();

    $(".myimage").click(function() {

        if ($(".img2", this).is(":hidden")) {
            $(this).next("div").find(".myul").slideToggle(600);

            $(".img1", this).hide();
            $(".img2", this).show();
        }
        else {

           $(this).next("div").find(".myul").slideToggle(600);
           $(".img2", this).hide();
            $(".img1", this).show();

        }

    });
});