jQuery沒有顯示/隱藏不同的ID搜索元素後點擊按鈕

我得到以下問題，這讓我很生氣。我試圖通過點擊搜索按鈕來顯示/隱藏搜索表單來打開它，並再次關閉它。現在，打開表單正常工作，但再次點擊圖標時，表單不會關閉。我沒有使用jQuery show（）和hide（）函數，而更喜歡保持這種方式。jQuery沒有顯示/隱藏不同的ID搜索元素後點擊按鈕

我jQuery是：

$('span#search-button').click(function() { 
    $('span#search-button').prop('id', 'search-button--active'); 
    $('#drawer-search-form').removeClass('hidden'); 
}); 


// broken bit, what it should do is effectively revert to the hidden state we changed in the previous code, but needless to say it won't. 
$('span#search-button--active').click(function() { 
    $('span#search-button--active').prop('id', 'search-button'); 
    $('#drawer-search-form').addClass('hidden'); 
});

這是相應的HTML：

<div class="drawer-heading"> 
    <!-- the starting state of the search form is hidden --> 
    <div id="drawer-search-form" class="drawer-search-form-style hidden"> 
    <!--<?php get_search_form(); ?>--> 
    </div> 
    <div class="drawer-search-button"> 
    <a href="#search-open"> 

     <!-- the button that opens and supposedly closes the search form --> 
     <span id="search-button" class="fa fa-search fa-border-circle fa-border-circle-fill fa-border-circle-float fa-border-circle-large" aria-hidden="true"> 
     </span> 

     </a> 
    </div> 
</div>

現在我曾嘗試在改變選擇到任何我能想到的。我也嘗試使用event.preventDefault();來檢查是否有其他的東西搞亂了它，但無濟於事。我也嘗試使用attr而不是prop，並將代碼的整個結構改爲不同的東西。

我一直在漫遊SO的解決方案，但沒有建議在其他線程工作我的代碼，悲傷。

坦率地說，它不會像第二個jQuery塊中指定的那樣做。這讓我覺得這是一個選擇問題;但我真的想盡一切辦法來修復選擇器......幫助將非常非常感激。

總結：我有一個按鈕，打開搜索表單。這工作。但是當試圖通過再次按下該按鈕嘗試關閉時，它確實不會而是再次隱藏該元素。

來源

2017-02-06 Extricate

與您的按鈕該ID不存在開始，第二次點擊將不會在它被調用的時候被綁定 - 或者做[delagated綁定]（http://api.jquery.com/on/#direct-and-委派事件）或做一個if，並檢查您的原始按鈕點擊id，並更改按鈕的作用，具體取決於它的編號 – Pete

你好皮特，感謝您的指針！我會深入介紹你鏈接的文檔，然後去看看！謝謝！ – Extricate

添加了一個答案來解釋你可以用例子做的不同選項 – Pete

由於當您綁定您的點擊事件時，您的編號爲search-button--active的按鈕不存在，因此該事件永遠不會被綁定，因此您的點擊不起作用。

爲了克服這一點，你需要delegate the event像這樣：

// original selector must be something that is there when the binding occurs 
$('.drawer-heading').on('click', 'span#search-button--active', function() { 
    $('span#search-button--active').prop('id', 'search-button'); 
    $('#drawer-search-form').addClass('hidden'); 
});

但是當你綁定到一個按鈕，然後更改ID（我會建議不要更改ID），我會只是改變你原來的代碼，以便而不是改變的id，你添加一個類，然後做你的邏輯在同一個按鍵綁定：

$('span#search-button').click(function() { 
    $(this).toggleClass('active'); 
    $('#drawer-search-form').toggleClass('hidden'); // as you just seem to be adding and removing a class, you can use toggleClass 
});

在上面，你切換目標的div類，並且在按鈕上使用#search-button.active

如果你正在做的東西不僅僅是切換的一類更復雜，所以該按鈕任何積極的風格可以有針對性的，我會做這樣的：

$('span#search-button').click(function() { 
    var button = $(this); 

    if (button.hasClass('active')) { 
     button.removeClass('active'); 
     $('#drawer-search-form').addClass('hidden'); 
     // do other stuff too 
    } else { 
     button.addClass('active'); 
     $('#drawer-search-form').removeClass('hidden'); 
     // do other stuff too 
    } 
});

來源

2017-02-06 11:29:25 Pete

非常感謝您的滿足和解決方案皮特！我並不知道_toggle_並已實施您的解決方案，並且完美地工作。有趣的是，綁定是如何工作的，我會暫時擱置一些時間去了解更多。再次感謝！ – Extricate

不客氣，很高興我能幫忙:) – Pete

如果其他人切換，我不明白你爲什麼要給另一個ID。它不會工作，但你可以切換類

$('span#search-button').click(function() { 
    if($(this).hasClass('search-button--active')) { 
    $(this).removeClass('search-button--active'); 
    } else { 
    $(this).addClass('search-button--active'); 
    }});

這是我的解決方案。

來源

2017-02-06 11:24:19

當然，你可以使用toggleClass功能，但在我的版本中，你可以添加更多的功能點擊 –

你好Giorgi，非常感謝你的答案。我不知道切換功能的存在，並決定實施（如前所述）。我明白你的解決方案可以提供更多的功能，我會徹底分析它！謝謝！ – Extricate

@Extricate歡迎您:) –

只需使用按鈕的ID並使用toggleClass功能來添加或刪除類hidden。

$('#search-button').click(function() { 

$('#drawer-search-form').toggleClass('hidden');

}）;

來源

2017-02-06 11:26:46

jQuery沒有顯示/隱藏不同的ID搜索元素後點擊按鈕

回答

相關問題