單擊一組錨點元素時切換圖像

Question

根據用戶點擊的位置，我需要隱藏和顯示一些圖像。 .img-active類表示默認顯示的圖像，.img-inactive類表示圖像隱藏。當你點擊錨時，這些圖像必須交換（顯示一個並隱藏另一個）。 顯然，如果你點擊另一個錨點，你最後點擊的那個錨點必須重新設置爲默認狀態。

但我現在有一個問題，該功能只適用於每個錨點的第一次點擊。當第二次嘗試時，你會看到它被打破。

在視頻中，您會看到每次點擊第二次後每個圓都有邊框，我這樣做只是爲了區分if條件。

I have recorded this video!

這是你可以看到在視頻的HTML：

<a class="fig-8" data-tab="tab1"> 
     <img src="path/researchicon-x.png" alt="" class="pulse img-active"> 
     <img src="path/selected-x.png" alt="" class="img-inactive"> 
    </a> 

    <a class="fig-8" data-tab="tab2"> 
     <img src="path/WideRange.png" alt="" class="pulse img-active"> 
     <img src="path/selected-x.png" alt="" class="img-inactive"> 
    </a> 

    <a class="fig-8" data-tab="tab3"> 
     <img src="path/SSI_toolbox.png" alt="" class="pulse img-active"> 
     <img src="path/selected-x.png" alt="" class="img-inactive"> 
    </a> 

    <a class="fig-8" data-tab="tab4"> 
     <img src="path/PricingIcon.png" alt="" class="pulse img-active"> 
     <img src="path/selected-x.png" alt="" class="img-inactive"> 
    </a> 

這裏是JS功能：

var iconTabs = function() { 
    $('.tabs1 a').on('click', function() { 
     var $tabContainer = $(this).parents('.tab-container'); 
     var tabId = $(this).data('tab'); 
     $tabContainer.find('.icons-tabs a').addClass('inactive'); 
     $(this).removeClass('inactive'); 


     // that functionality begins here!!! 
     $('.tabs1 a').not(this).find('.img-inactive').hide(); 
     $('.tabs1 a').not(this).find('.img-active').show(); 

     var active; 
     if ($(this).hasClass('selected-shown')) { 
      active = '.img-inactive'; 
      $(this).find('.img-active').css('border', '5px solid green'); 
     } else { 
      active = '.img-active'; 
      $(this).find('.img-active').show(); 
      $(this).find('.img-active').css('border', '4px solid red'); 
     } 

     var show; 
     if ($(this).hasClass('selected-shown')) { 
      show = '.img-active'; 
      $(this).find(show).css('border', '3px solid blue'); 
     } else { 
      show = '.img-inactive'; 
      $(this).removeClass('selected-shown'); 
      $(this).find('.img-active').css('border', '6px solid orange'); 
     } 

     $(this).addClass('selected-shown').find(show).show(); 
     $(this).find(active).hide(); 

    }); 
}; 

這.selected-shown只是一個標誌，我添加到父元素來檢查我點擊過的錨點。

有什麼建議嗎？

Answer 1

試試這個，請在​​代碼

閱讀評論看到的代碼在行動

$('.tabs1 a').on('click', function() { 
 
    var ThisIt = $(this),        // this 
 
     All_a_but_this = $('.tabs1 a').not($(this)), // all <a> tags but this 
 
     Active = $(this).find('img.img-active').is(':visible'), // return true if the img with img-active class is visible 
 
     Inactive = $(this).find('img.img-inactive').is(':visible'); // return true if the img with img-inactive class is visible 
 
    // return all <a> but this to default 
 
    All_a_but_this.each(function(){  // loop through other <a> 
 
     $(this).removeClass('selected-shown'); // remove selected-shown 
 
     $(this).find('img.img-active').show(); // show active image 
 
     $(this).find('img.img-inactive').hide(); // hide inactive image 
 
    }); 
 
    // swap 
 
    if(Active === true){ // if active image is visible 
 
     $(this).find('img.img-active').hide();  // hide active image 
 
     $(this).find('img.img-inactive').show(); // show inactive image 
 
    } 
 
    if(Inactive === true){ // if inactive image is visible 
 
     $(this).find('img.img-active').show(); // show active image 
 
     $(this).find('img.img-inactive').hide(); // hide active image 
 
    } 
 

 
    $(this).toggleClass('selected-shown'); // toggle selected-shown class 
 
}).filter('.selected-shown').click();

.img-active{ 
 
    display: block; 
 
} 
 
.img-inactive{ 
 
    display : none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tabs1"> 
 
    <a class="fig-8" data-tab="tab1"> 
 
     <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active"> 
 
     <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8" data-tab="tab2"> 
 
     <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active"> 
 
     <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8" data-tab="tab3"> 
 
     <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active"> 
 
     <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive"> 
 
    </a> 
 

 
    <a class="fig-8 selected-shown" data-tab="tab4"> 
 
     <img src="http://via.placeholder.com/140x100" alt="" class="pulse img-active"> 
 
     <img src="http://via.placeholder.com/200x150" alt="" class="img-inactive"> 
 
    </a> 
 
</div>

Answer 2

Try this one. 



<div id="gallery"> 
    <div class="main"> 
     <div class="big show"><!-- image/video here --></div> 
     <div class="big"><!-- image/video here --></div> 
     <div class="big"><!-- image/video here --></div> 
    </div> 

    <div class="thumbnails"> 
     <a href="#"><img src="images/thumb1.jpg" alt="#"/></a> 
     <a href="#"><img src="images/thumb1.jpg" alt="#"/></a> 
     <a href="#"><img src="images/thumb1.jpg" alt="#"/></a> 
    </div> 

    $('.thumbnails a').on('click',function(){ 
     var eq = $(this).index(); 

     $('.main .big').removeClass('show'); 
     $('.main .big').eq(eq).addClass('show'); 
    });