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

切换回时Jquery切换不起作用

5 个答案: