jQuery代碼無法正常運行

Question

對不起標題，我只是不知道將其設置為什么。 如果您能想到該問題的標題，請告訴我或編輯，謝謝。 現在到問題。 我已經寫了一些jQuery代碼，根據單擊的鏈接顯示不同的框。 當您再次單擊鏈接時，所有方框都會重新出現，這正是我想要的。 我的問題是，當我單擊link1時，然后單擊link2，然后返回到link1，所有圖像重新出現。 我不希望這種情況發生。 我只希望出現link1的框。 所有框應僅在開始時和單擊鏈接兩次時顯示。

 $(".links").click(function(){ var current_link = $(this); var images = $(".images") $(images).removeClass('hide'); $(images).removeClass('show'); var current = $(this).data("cat"); $(images).addClass('hide'); $('.'+current).addClass('show'); $(current_link).click(function(){ $(images).toggleClass('hide'); }); }); 

 ul{ list-style-type: none; } ul li{ display: inline-block; } ul li a{ font-size: 20px; padding: 10px; background-color: yellow; } .change{ background-color: red; } .print{ height: 100px; width: 100px; background-color: blue; display: inline-block; } .portfolio{ height: 100px; width: 100px; background-color: red; display: inline-block; } .web{ height: 100px; width: 100px; background-color: orange; display: inline-block; } .hide{ display: none; } .show{ display: inline-block; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"> </div> <div class="portfolio images"> </div> <div class="web images"> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

Answer 1

您可以通過添加一個類。主動上的鏈接添加條件，並檢查鏈接都有課，並且只使用了.images類.hide，沒有必要使用類.show

參見代碼片段 ：

 $(".links").click(function() { var current_link = $(this); var images = $(".images"); var links = $(".links"); var current = $(this).data("cat"); if (current_link.hasClass('active')) { links.removeClass('active'); images.removeClass('hide'); } else { links.removeClass('active'); current_link.addClass('active'); images.addClass('hide'); $('.' + current).removeClass('hide'); } }); 

 ul { list-style-type: none; } ul li, .images { display: inline-block; } ul li a { font-size: 20px; padding: 10px; background-color: yellow; } .change { background-color: red; } .images { height: 100px; width: 100px; } .print { background-color: blue; } .portfolio { background-color: red; } .web { background-color: orange; } .hide { display: none; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"></div> <div class="portfolio images"></div> <div class="web images"></div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

Answer 2

您需要維護全局變量中的當前鏈接，或者像我在window對象中所做的那樣，請嘗試以下操作：

 $(".links").click(function(){ var current_link = $(this); var images = $(".images") var current = $(this).data("cat"); if(current == window.currentImage){ $(images).removeClass('hide'); $(images).removeClass('show'); window.currentImage = null; return; // don't do anything id current link is clicked } $(images).addClass('hide'); $('.'+current).removeClass('hide'); $('.'+current).addClass('show'); window.currentImage = current; }); 

 ul{ list-style-type: none; } ul li{ display: inline-block; } ul li a{ font-size: 20px; padding: 10px; background-color: yellow; } .change{ background-color: red; } .print{ height: 100px; width: 100px; background-color: blue; display: inline-block; } .portfolio{ height: 100px; width: 100px; background-color: red; display: inline-block; } .web{ height: 100px; width: 100px; background-color: orange; display: inline-block; } .show{ display: inline-block; } .hide{ display: none; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"> </div> <div class="portfolio images"> </div> <div class="web images"> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 

謝謝

Answer 3

對於您來說，這可能是一個更清潔的解決方案。 我也在用一個條件:)

 var current = null; var images = $('.images'); $(".links").click(function(){ if(current === $(this).data("cat")){ images.removeClass('hide'); current = null; } else { current = $(this).data("cat"); $(images).addClass('hide'); $('.'+current).removeClass('hide'); } }); 

 ul{ list-style-type: none; } ul li{ display: inline-block; } ul li a{ font-size: 20px; padding: 10px; background-color: yellow; } .change{ background-color: red; } .print{ height: 100px; width: 100px; background-color: blue; display: inline-block; } .portfolio{ height: 100px; width: 100px; background-color: red; display: inline-block; } .web{ height: 100px; width: 100px; background-color: orange; display: inline-block; } .hide{ display: none; } .show{ display: inline-block; } 

 <ul> <li><a id="hi" class="links" data-cat="print" href="#">link1</a></li> <li><a class="links" data-cat="portfolio" href="#">link2</a></li> <li><a class="links" data-cat="web" href="#">link3</a></li> </ul> <div class="print images"> </div> <div class="portfolio images"> </div> <div class="web images"> </div> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>