...提前为我乱七八糟的编码道歉,我还在玩这个。简而言之,我试图拥有 3 个(将来可能更多)按钮,当单独单击它们时,会显示所有具有特定 .class 名称的 div(同时隐藏具有其他特定 .class 名称的其他 div)。类似于虚假的内容切换系统。
$("#mr-button-01").click(function() {
$(".key-01").css({ "background":"#ff00ff" }).animate( "slow" );
$(".key-02, .key-03").removeAttr('style');
$(".info-01").show();
$(".info-02, .info-03").hide();
return false;
});
现在,mr-button-01 和 key-01 是相同的元素(只是用于样式的 id 和 class)。对每个不同的按钮重复此代码,简单地关闭或关注其他“信息”类。可能不是最好的行动计划,但每个按钮都有不同的功能并且具有不同的“激活”.css 样式,所以我不知道还有什么其他方法可以处理它。
原点:我想弄清楚如何检查页面上是否存在“.info-01”。如果没有,我们保留,但一起取消切换按钮。像...
if
.info-01 DOES exist
proceed with original ridiculous 'click sorting' thing
else
.info-01 DOESN'T exist on the page
.#mr-button-01 click does nothing
.key-01 (aka #mr-button-01) has a "dead" .css style applied to it
我知道有“:not”和一些其他选项 - 我只是不清楚语法或处理此问题的最佳方法。任何帮助将不胜感激,并随时提出替代方法,一种更简洁的方法来消除膨胀等。
HTML,非常基础:
<div id="nigga">
<a href="#" id="mr-button-01"><div class="key-01">Choice 01</div></a>
<a href="#" id="mr-button-02"><div class="key-02">Choice 02</div></a>
<a href="#" id="mr-button-03"><div class="key-03">Choice 03</div></a>
</div>
最佳答案
也许这就是您要找的:
$("#mr-button-01").click(function(){
// Check if element with searched class exists
if($('.info-01')){
//Apply css to clicked button
$(this).animate({'background-color', 'ff00ff'), 'slow', function(){
//Open info-1
$(".info-01").show();
//Hide info-02 and info-03 if they are shown
$(".info-02").hide();
$(".info-03").hide();
});
}else{
//If searched class doe's not exist
$(this).addClass('dead css class name');
return false;
}
});
关于javascript - 如果类存在,则显示/隐藏类的 jQuery 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20022663/