Question

我需要使用jQuery在每次点击时更改图像，让我们说第一次加载时它将是img1，当我点击img1时，它将是img2并再次如果我点击img2它将会img 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();

            }

        });
    });

但是问题是因为类是相同的，两个部分都采用相同的图像。当我点击第一部分时，只应更改第一部分的图像，如何做taht ..任何建议

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();

        }

    });
});

Answer 2

您可以使用选择器来查找相对于最初触发事件的元素的DOM元素。

例如，在这种情况下，您可以找到已将“点击”事件附加到的跨度的子项：

 $(".myimage").click(function() {
           if ($(this).children(".img2").is(":hidden")) {
              // do something
           }

如何在jQuery中运行时更改图像

2 个答案: