切換時jQuery切換不起作用

Question

我正在使用jquery切換，以顯示一個圖像，然后當用戶單擊某個元素時，更改為另一圖像，如果他們再次單擊，則顯示原始圖像。 像開閉一樣。 當我第一次單擊時它起作用，但此后沒有任何作用。 這是我的jQuery

 $(".filterInventory").on("click", function () {

    $(".inventory-search").toggle();
    $(".filer-arrow.down").hide();
    $(".filer-arrow.up").show();

    return false;

});

這是HTML

<div class="container container-padding-top inventory-search-button">
        <div class="row">
            <div class="col-md-12">
                <a href="#" class="filterInventory">Filter <img src="~/Images/icons/down-arrow-white.png" class="filer-arrow down" alt="Filter Arrow" /><img src="~/Images/icons/up-arrow-white.png" class="filer-arrow up" alt="Filter Arrow" /></a>
            </div>
        </div>
    </div>

CSS：

#communities a.filterInventory img.up {
    display: none;
}

#communities .filterInventory .filer-arrow {
    height: 10px;
}

Answer 1

最初隱藏其中一張圖片

$('img.down').hide();

然后只需在它們之間切換

$(".filterInventory").click(function () {
    $(".filterInventory img").toggle();
});

Answer 2

首先隱藏一幅圖像，然后單擊切換圖像。

這種方法怎么樣？

HTML：

<div id="infoToggler"><img src="https://lorempixel.com/400/200/sports/Dummy-Text"/>
<img src="https://lorempixel.com/400/200/abstract/Dummy-Text" style="display:none"/>
</div>

JS：

$("#infoToggler").click(function() {
  $(this).find('img').toggle();
});

http://jsfiddle.net/M9QBb/522/

Answer 3

$("#communities .inventory-search button.dropdown-toggle").on("click", function () {

        $("#communities .inventory-search button.dropdown-toggle").toggleClass('button-down', !state).toggleClass('button-up',state);

    });

只是jQuery

Answer 4

您可以檢查其中是否可見，然后通過該操作對其進行操作。

$(".filterInventory").on("click", function () {
    if($(".filer-arrow.down").is(":visible")) {
      $(".filer-arrow.down").hide();
      $(".filer-arrow.up").show();
    } else {
      $(".filer-arrow.up").hide();
      $(".filer-arrow.down").show();
    }
});

Answer 5

由於您的其中一張圖片已被隱藏（假設從CSS中，您在html周圍有一個#communities元素），您只需切換它們即可。 而不是像其他答案一樣將img元素作為目標，而是按類選擇所有元素：

$(".filterInventory").on("click", function () {

    $(".filer-arrow.down, .filer-arrow.up, .inventory-search").toggle();
    return false;
});