Jquery If/Then in Click Function?

Jquery If/Then in Click Function?

本文关键字：Click Function in Then If Jquery      更新时间：2023-09-26

这就是我希望它做的事情...

当单击名为"bd"的div 时>检查 id 为"ump"的div 是否具有"活动"类>如果是这样，获取带有"brandDump"类的div并将其缓慢向上滑动，隐藏它，然后删除"active"类>其他，将带有类"brandDump"的div向下滑动，显示它，并添加"active"类

当我单击div.bd 时，没有任何反应。我做错了什么？

下面的小提琴链接和代码。

http://jsfiddle.net/K2V8f/36/

<div class="bd">cool</div>
<div class="brandDump" id="ump">works</div>
<div>shape</div>
.brandDump {
background-color:#fff;
width:100px;
display:none;
}
.bd {
width:100px;
height:100px;
background-color:#000;
}
$(".bd").click(function () {
if ("#ump".hasClass("active")) {
    $(".brandDump").slideUp("slow");
    $(".brandDump").hide();
    $(".brandDump").removeClass("active");
} else {
    $(".brandDump").slideDown("slow");
    $(".brandDump").show();
    $(".brandDump").addClass("active");
}
});

更新的小提琴

您需要在 slideUp 完成时使用回调。

$(".bd").click(function () {
    if ($("#ump").hasClass("active")) {
        $(".brandDump").slideUp("slow", function () {
            $(".brandDump").removeClass("active");
        });
    } else {
        $(".brandDump").slideDown("slow", function () {
            $(".brandDump").addClass("active");
        });
    }
});

（"#ump"）也出现了错误...应该是 $（"#ump"）

问题是你有：

"#ump".hasClass(...

。当你应该有：

$("#ump").hasClass(...

但另请注意，.slideUp() 和 .slideDown() 方法隐藏并显示您的元素，因此您也不需要调用 .hide() 和 .show()。此外，如果您希望jQuery方法对同一元素进行操作，则将它们链接在一起更有效：

$(".bd").click(function () {
    if ($("#ump").hasClass("active")) {
        $(".brandDump").slideUp("slow")
                       .removeClass("active");
    } else {
        $(".brandDump").slideDown("slow")
                       .addClass("active");
    }
});

演示：http://jsfiddle.net/K2V8f/50/

"检查 ID 为'UMP'的div 是否具有"活动"类>如果有，则使用"brandDump"类获取div 并将其慢慢向上滑动"

ID 为 ump 的div 与类 brandDump 的 div 相同。我不确定你为什么要谈论它们，就好像它们是两个不同的div，而实际上你的代码似乎可以互换使用 #ump 和.brandDump选择器来选择一个div，但如果你更一致地将它们视为一个，您可以将函数缩减为一行：

$(".bd").click(function () {
    $(".brandDump").slideToggle("slow").toggleClass("active");
});

演示：http://jsfiddle.net/K2V8f/51/

相关文章：