Toggle Bilder beim Klicken auf eine Reihe von Ankerelementen

Question

Ich muss ausblenden und zeigen einige Bilder je nachdem, wo der Benutzer klickt. Die Klasse .img-active zeigt das standardmäßig angezeigte Bild an und die Klasse .img-inactive zeigt das ausgeblendete Bild an. Wenn Sie auf den Anker klicken, müssen diese Bilder ausgetauscht werden (zeigen Sie einen und verstecken Sie den anderen). Wenn Sie auf einen anderen Anker klicken, muss der zuletzt angeklickte Knoten natürlich wieder auf seinen Standardzustand zurückgesetzt werden.

Aber ich habe gerade ein Problem damit, die Funktionalität funktioniert nur im ersten Klick auf jeden Anker. Wenn Sie das zweite Mal versuchen, werden Sie sehen, dass es kaputt ist.

In dem Video sehen Sie, dass jeder Kreis eine Grenze hat, nachdem Sie das zweite Mal geklickt haben, ich habe das nur getan, um die if Bedingungen zu unterscheiden.

I have recorded this video!

Dies ist die HTML, die Sie im Video sehen kann:

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

Hier ist die JS-Funktion:

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

    }); 
}; 

Das .selected-shown ist nur ein Flag Ich bin Hinzufügen zum übergeordneten Element, um den Anker zu überprüfen, auf den ich geklickt habe.

Irgendwelche Vorschläge?

Answer 1

die Sie interessieren und Aktion Kommentare im Code

in den Code anzeigen

$('.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'); 
    });