圖像交換圖像點擊與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/