Question

我正在尝试使用javascript if click方法在点击上交换图像。第一个图像交换工作（如果），但另外2个不工作（否则如果）。这是我的JS / JQuery：

$("#right").on("click" , 

 function() {

    var pic = $("#selection img").attr("id");

    if (pic == "instagram") {
        $("#instagram").removeClass("show").addClass("hide");
        $("#snapchat").removeClass("hide").addClass("show");
        $("span").text("Snapchat");

    }

    else if (pic == "snapchat") {
        $("#snapchat").removeClass("show").addClass("hide");
        $("#twitter").removeClass("hide").addClass("show");
        $("span").text("Twitter");
    }

    else if (pic == "twitter") {
        $("#twitter").removeClass("show").addClass("hide");
        $("#facebook").removeClass("hide").addClass("show");
        $("span").text("Facebook");
    }

});

这是我的CSS：

.hide {
display: none;
}

.show {
display: inline;
}

这是我的HTML：

<div id="selection">
    <img id="instagram" class="show" src="img/instagram.png">
    <img id="snapchat" src="img/snapchat.png">
    <img id="twitter" src="img/twitter.png">
    <img id="facebook" src="img/facebook.png">
</div>

感谢您的回答！

Answer 1

也许尝试这样的事情：

$("#right").on("click" , function() {

      var pic = $("#selection img").attr("id");
      $("#selection img").removeClass("show").addClass("hide");
      $("#selection #"+pic).removeClass("hide").addClass("show");
      $("span").text(pic);
  });

});

Answer 2

即将上传到小提琴！这应该可以解决你的问题。

$("#right").click(function() {
    var nextImg = $(".show").next();
    if ($(".show").attr("id") == "facebook") {
        nextImg = $("#instagram");
    }
    $(".show").addClass("hide");
    $(".show").removeClass("show");
    nextImg.addClass("show");
    nextImg.removeClass("hide");
});

$("#left").click(function() {
    var prevImg = $(".show").prev();
    if ($(".show").attr("id") == "instagram") {
        prevImg = $("#facebook");
    }
    $(".show").addClass("hide");
    $(".show").removeClass("show");
    prevImg.addClass("show");
    prevImg.removeClass("hide");
});

在查看你的问题后，它看起来不确定你真正在问什么。你想创建某种类型的画廊吗？是否有其他兄弟姐妹没有class="hide"

的原因

如果您没有注意到pic变量不等于一张图片。

var pic = $("#selection img").attr("id");

你问的是“如果#selection中的图片有一个id”（这就是全部）也许你的意思

var pic = $("#selection img").hasClass("show");

https://jsfiddle.net/swvq6ves/（小提琴）

这是新的小提琴，包括前一个按钮！ https://jsfiddle.net/swvq6ves/1/

Answer 3

您需要在图像的索引之间交换类。

这被认为是循环，如果你在最后一个索引上那么它应该先从那个开始。

检查工作代码段。

//Apply the hide to all the images except first one
$('#selection img').not(":eq(0)").addClass("hide");
var currentIndex=0;
var newIndex=0;
$("#right").on("click" , function() {
  //Check is it a last index
  var isLast = $('#selection img').last().hasClass('show');
  currentIndex = $('#selection img.show').index();
  //If it is last index then hide the same and show the first image
  if(isLast)
  {
          $('#selection  img:eq('+currentIndex+')')
              .removeClass('show')
              .addClass('hide');

          $('#selection  img:eq(0)')
              .removeClass('hide')
              .addClass('show');
  }
  else
  {
          $('#selection  img:eq('+currentIndex+')')
               .removeClass('show')
               .addClass('hide');

          $('#selection img:eq('+(currentIndex+1)+')')
              .removeClass('hide')
              .addClass('show');  
  }
  $('#output').html($('#selection img.show').attr('id'));
});

.hide {
display: none;
}

.show {
display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">
    <img id="instagram" class="show" src="img/instagram.png">
    <img id="snapchat" src="img/snapchat.png">
    <img id="twitter" src="img/twitter.png">
    <img id="facebook" src="img/facebook.png">
</div>
<span id="output"></span>
<a href="#" id="right">Right</a>

图像上的图像交换单击javascript，如果否则

3 个答案: