Javascript jQuery按钮,用于在类存在时显示/隐藏类
…为我的卑鄙编码提前道歉,我还在玩这个。简而言之,我正在尝试使用3个(将来可能会更多)按钮,当单独单击时,这些按钮将显示具有特定.class名称的所有div(同时隐藏具有其他特定.class名称的其他div)。有点像假内容切换系统Javascript jQuery按钮,用于在类存在时显示/隐藏类,javascript,jquery,css,toggle,show-hide,Javascript,Jquery,Css,Toggle,Show Hide,…为我的卑鄙编码提前道歉,我还在玩这个。简而言之,我正在尝试使用3个(将来可能会更多)按钮,当单独单击时,这些按钮将显示具有特定.class名称的所有div(同时隐藏具有其他特定.class名称的其他div)。有点像假内容切换系统 $("#mr-button-01").click(function() { $(".key-01").css({ "background":"#ff00ff" }).animate( "slow" ); $(".key-02, .key-03").remove
$("#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和类)。此代码对每个不同的按钮重复,只需关闭或关注其他“info”类。可能不是最好的行动计划,但每个按钮都有不同的功能,并且有不同的“激活的”.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;
}
});
您的html和js似乎不太兼容,或许可以尝试以下内容:
<a href="#" class="mr-button" data-id="1"><div class="key key-1">Choice 01</div></a>
<a href="#" class="mr-button" data-id="2"><div class="key key-2">Choice 02</div></a>
<a href="#" class="mr-button" data-id="3"><div class="key key-3">Choice 03</div></a>
这是一个稍微多一点的html,但它更具可重用性的代码。似乎无法实现这一点,仍在深入研究。这是非常基本的:谢谢-这似乎是一个坚实的方向,伊玛重新启动了我的大脑,稍后再处理。因此,这是我第一次因为对属性值的选择非常糟糕,即使是“讽刺”的,而感到不快。
$(".mr-button").click(function() {
$key = $(".key-" + $(this).attr("data-id")); // locate key using this data-id
if($key.length != 0){ // if $key exists, do silly thangs
$key.show();
$(".key").hide();
}
return false;
});