Is it possible to add a class using jQuery when two specific conditions are met?
1) If the dropdown selection is either "acting" or "backstage"
2) If the membership status is set to "Non-member"
If both of these requirements are fulfilled, I would like to apply an animation to the Upgrade button by adding the Animate.css class.
I have some parts of a function ready, but struggling to combine them effectively:
($(this).val() == 'Acting' || $(this).val() == 'Backstage')
and
$("#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>