图像交换图像点击与JavaScript如果其他

Question

我想交换一个图像上的点击与JavaScript如果其他方法。第一个图像交换工作（如果），但其他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

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

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

检查工作片段。

//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>

Answer 2

也许尝试somerthing这样的：

$("#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 3

关于本上传到小提琴！这应该可以解决你的问题。

$("#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/