更改 class IF 下拉列表和 H2 内容与 Animate.css 匹配特定条件

Question

如果满足两种不同的情况，希望添加 class 和 jQuery

1) The dropdown equals acting or backstage

2) The membership fields contains "Non-member"

if both these are met I wish to pulse(animate) the Upgrade button using the added Animate.css class.

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

($(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>

Here is the Plunker

Answer 1

在您的非会员中输入 class。例如，

<h2 id="member_status" class="myClass">Non-member</h2>

在JQuery,

(document).ready(function () {
 function myFunction()
  {
   var text = $('#interest :selected').text();
   If(text == "Acting" || text == "Backstage")
      {
       $(".myClass").each(function() {
       var value = $(this).text();
       if(value === 'Non-member'){
          //do whatever you want to do
       }
   }
 }}})

在下拉变化事件中调用函数

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

如果对您有帮助，请不要忘记标记为答案。

Answer 2

我会这样做：

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

Here is the JSFiddle demo

更改 class IF 下拉列表和 H2 内容与 Animate.css 匹配特定条件

Change class IF dropdown and H2 contents match certain criteria with Animate.css

html

javascript

css

jquery

animate.css