更改类 IF 下拉列表和 H2 内容与 Animate.css 的某些条件匹配

me9867 发表于 Dev

我9867

如果遇到两种不同的情况，希望使用 jQuery 添加一个类

1)dropdown等于演戏或后台

2) 会员栏位包含“非会员”

如果满足这两个条件，我希望使用添加的 Animate.css 类对升级按钮进行脉冲（动画处理）。

我有一个函数的几个部分，只是在将它们拼凑在一起工作时遇到了一些麻烦：

($(this).val() == 'Acting' || $(this).val() == 'Backstage')

和

$("#member_status").each(function() {
  var value = $(this).text();
  if(value === 'Non-member'){
  $("#upgrade_member").css('display','block');
  }
});

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  </head>

  <body>
    <h1 id="member_welcome">Welcome to our membership site</h1>
    <h2 id="member_status">Non-member</h2>

    <select class="regular-text" name="interest" id="interest">
                <option value="not specified">Not Specified</option>
                <option value="Watching">Watching</option>
                <option value="Acting">Acting</option>
                <option value="Backstage">Backstage</option>
                <option value="Supplier">Supplier</option>
        </select>

    <div style="margin-top:20px">
    <button id="upgrade_member">Upgrade Membership</button>
    </div>

    <div id="example" class="animated infinite bounce" style="margin-top:100px;">EXAMPLE</div>
  </body>

</html>

这是Plunker

啊N

这就是我将如何做到的：

$("#interest").change(function() {
  var membership = $("#member_status").text().toLowerCase().includes("non-member");
  var interest = $("#interest").val().toLowerCase();
  if (membership && (interest == "acting" || interest == "backstage")) {
    $("#upgrade_member").addClass("animated infinite pulse");
  } else {
    $("#upgrade_member").removeClass("animated infinite pulse");
  }
});

$(document).ready(function(){
  $("#interest").change();
});

这是JSFiddle 演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。