Para lograr un mejor rendimiento para nuestra tienda Shopify, deshabilitamos jQuery. ¿Podría ayudar a cambiar el código jQuery a continuación a su equivalente de 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>Los detectores de eventos se agregan mediante addEventListener y, en lugar de show / hide , se usa la propiedad de display del elemento.
Además, lea sobre el operador ternario .
// 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" }) })Fragmento de trabajo:
// 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>