jQuery按钮显示/隐藏类,如果存在类
jQuery buttons to show/hide classes IF classes exist
。。。提前为我拙劣的编码道歉,我还在玩这个。简言之,我正在尝试使用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用于样式)。对于每个不同的按钮都会重复此代码,只需关闭或专注于其他"info"类。可能不是最好的行动计划,但每个按钮都有不同的功能,并且有不同的"activated".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
我知道有":不是"和其他一些选项——我只是不清楚语法或处理这一问题的最佳方法。任何帮助都将不胜感激,并随时建议一种替代方法,一种更简洁的方法来消除肿胀等。
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>
和
$(".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;
});
它有点像html,但它是更可重用的代码。
相关文章:
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 一个密码测试程序,如果存在空格,它会提醒用户
- javascript如果图像不存在don't加载它
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 检查搜索结果是否存在多次如果是,则在Javascript中只显示一个结果
- 从一个数组中移除字符串(如果存在于另一个数组)
- underline-js:将键对象与数组键对象进行比较,如果存在,则移除现有的添加新的
- 如果存在特定类,请不要添加类
- jQuery appendTo 替换元素而不是添加元素,如果正在添加的元素预先存在于列表中
- 检查页面范围并提取<h1>内容(如果使用JQuery存在页面)
- 如果文件不存在,fs.watch是否有错误处理程序
- Shopify Liquid:如果存在价格比较,如何仅显示产品变体的价格比较
- 从params推送到对象(如果不存在)
- 如何从网站获得apple touch图标,如果没有;不存在,则显示收藏夹
- 如果 document.title 不存在,如何获取页面标题名称
- 基本 Jquery - 如果 TD 中存在文本,则使 DIV 可见
- 在Require.js中,如果Require()是一个函数,那么Require.config()是如何存在的
- 仅JavaScript-删除某些类(如果存在)
- jQuery脚本,它搜索现有的查询参数并且不添加“"如果存在
- Javascript -检查键是否存在-如果不创建它,都在一行中