如果类存在，则显示/隐藏类的 jQuery 按钮

Question

...为我的混蛋编码提前道歉，我仍在玩弄这个。简而言之，我试图拥有 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）。对每个不同的按钮重复此代码，只需关闭或关注 other "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>

Answer 1

也许这就是你要找的：

$("#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;
    }
});

Answer 2

您的 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，但它是更可重用的代码。