将 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 添加事件侦听器，而不是 show/hide，使用元素的 display 属性。

此外，请阅读 ternary operator。

// 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>

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

Convert jQuery dropdown change event handler into pure JavaScript code

html

javascript

jquery

frontend