将jQuery下拉更改事件处理程序转换为纯JavaScript代码

Question

为了让我们的Shopify商店获得更好的性能，我们禁用了jQuery。你能帮我把下面的jQuery代码改成等效的JavaScript代码吗？

<p class="cart-attribute__field">
<label>How did you hear about us?</label><br>
<select required class="required" id="how-did-you-find-us" name="attributes[How did you hear about us?]">
<option value="Search (Google)"{% if cart.attributes["How Did You Find Us?"] == "Search (Google)" %} selected{% endif %}>Search (Google)</option>
<option value="Event"{% if cart.attributes["How Did You Find Us?"] == "Event" %} selected{% endif %}>Event</option>
<option value="Friend / Co-worker"{% if cart.attributes["How Did You Find Us?"] == "Friend / Co-worker" %} selected{% endif %}>Friend / Co-worker</option>
<option value="Current Customer"{% if cart.attributes["How Did You Find Us?"] == "Current Customer" %} selected{% endif %}>Current Customer</option>
<option value="Social Media"{% if cart.attributes["How Did You Find Us?"] == "Social Media" %} selected{% endif %}>Social Media</option>
<option value="Ad"{% if cart.attributes["How Did You Find Us?"] == "Ad" %} selected{% endif %}>Ad</option>
<option value="News"{% if cart.attributes["How Did You Find Us?"] == "News" %} selected{% endif %}>News</option>
<option value="Other"{% if cart.attributes["How Did You Find Us?"] == "Other" %} selected{% endif %}>Other</option>
</select>
</p>
<p class="cart-attribute__field find-other" style="display: none;">
<label for="how-did-you-find-us-other">Other: </label>
<input required class="required" id="how-did-you-find-us-other" type="text" name="attributes[How did you hear about us? - Other]" value="{{ cart.attributes["How Did You Find Us - Other"] }}">
</p>

<script>
jQuery(function($) {
$('#how-did-you-find-us').change(function() {
if ($('#how-did-you-find-us').val() == 'Other') {
$('.find-other').show();
} else {
$('.find-other').hide();
}
});
});
</script>

Answer 1

使用addEventListener添加事件侦听器，并且使用元素的display属性而不是show/hide。

另外，请阅读有关三元运算符的内容。

// Event listener that fires when the DOM is loaded
document.addEventListener("DOMContentLoaded", function(){
// Get the elements
let howDidYouFindUs = document.querySelector("#how-did-you-find-us")
let findOther = document.querySelector(".find-other")

// Change event listener
howDidYouFindUs.addEventListener("change", function(){
// Ternary operator to toggle the display
findOther.style.display = howDidYouFindUs.value === "Other" ? "block" : "none"
})
})

工作片段：

// Event listener that fires when the DOM is loaded
document.addEventListener("DOMContentLoaded", function(){
// Get the elements
let howDidYouFindUs = document.querySelector("#how-did-you-find-us")
let findOther = document.querySelector(".find-other")

// Change event listener
howDidYouFindUs.addEventListener("change", function(){
// Ternary operator to toggle the display
findOther.style.display = howDidYouFindUs.value === "Other" ? "block" : "none"
})
})

<p class="cart-attribute__field">
<label>How did you hear about us?</label><br>
<select required class="required" id="how-did-you-find-us" name="attributes[How did you hear about us?]">
<option value="Search (Google)">Search (Google)</option>
<option value="Event">Event</option>
<option value="Friend / Co-worker">Friend / Co-worker</option>
<option value="Current Customer">Current Customer</option>
<option value="Social Media">Social Media</option>
<option value="Ad">Ad</option>
<option value="News">News</option>
<option value="Other">Other</option>
</select>
</p>
<p class="cart-attribute__field find-other" style="display: none;">
<label for="how-did-you-find-us-other">Other: </label>
<input required class="required" id="how-did-you-find-us-other" type="text" name="attributes[How did you hear about us? - Other]" value="{{ cart.attributes[" How Did You Find Us - Other "] }}">
</p>