我相信我正在使用 Javascript，但我并不积极（对我宽容一点，我知道基本的 - 中间 HTML）。在我们电子商务网站的结帐部分，有一个页面显示所有有效的 UPS 运输选项，以及仓库取货（所有这些选项均从我们的数据库：Netsuite 中提取），因此客户可以选择他们希望如何处理订单已发货。
我正在尝试更新此页面，以便仅当选择“仓库提货”（内部 ID #：171）时，运输选项下方才会显示 1-2 句话文本。但是，当我尝试输入我认为可以实现这一点的代码时，结账页面崩溃了。我做错了什么以及如何纠正？
我附上了网页的屏幕截图，以便您可以看到它的外观和工作原理。 显示运送方式的结帐页面屏幕截图
我添加的使文本出现的部分是（另外，我在末尾添加了一个 <% { %> 将其关闭）：
<% if (shipmethod.get('internalid')="171") { %>
<% =_('Please note: For orders under $100, a $0.10/shopping bag fee will be applied to your order upon fulfillment, as required by City of Annapolis Ordinance 5-24. To learn more about the Annapolis Plastic Bag Ban Act, <a hred="https://www.annapolis.gov/2197/Plastic-Bag-Reduction-Act#:~:text=Effective%20January%2022%2C%202025%2C%20retailers,bring%20reusable%20bags%20for%20shopping." target="_blank"'>.')translate() %>
完整代码如下：
<form class="delivery-options" action="">
<fieldset style="margin-bottom:36px;">
<legend class="delivery-options-header section-header">
<%= _('Delivery Options:').translate() %>
</legend>
<span class="delivery-option-label">
<%= _('<em>For Canadian shipping addresses, we recommend using USPS Priority Mail. To choose this option, select UPS Ground below and click Continue. Then continue checking out. On the Review Your Order page, use the text box at the bottom to request our staff to change the shipping method to USPS Priority Mail.</em>').translate() %>
</span><P></p><br><p></P>
<% if (!view.model.get('isEstimating') && !view.wizard.application.getUser().get('addresses').get(view.model.get('shipaddress'))) { %>
<%= _('Warning: Please enter a valid shipping address first').translate() %>
<% } else if (!shipping_methods.length) { %>
<%= _('Warning: No Shipping Methods are available for this address').translate() %>
<% } else { %>
<% shipping_methods.each(function (shipmethod) { %>
<% if(custentity5 && custentity5.length > 0 && shipmethod.get('internalid') == "5213") { %>
<% is_active = order_delivery_method === shipmethod.get('internalid') %>
<label class="delivery-option<%= is_active ? ' active' : '' %>" data-id="<%= shipmethod.get('internalid')%>" data-account="<%=custentity5[0].value%>">
<input
type="radio"
name="delivery-options"
id="delivery-options-<%= shipmethod.get('internalid')%>"
value="<%- shipmethod.get('internalid')%>"
<%= is_active ? 'checked' : '' %>
>
<span class="delivery-option-label">
<%= shipmethod.get('name') %>
</span>
</label>
<% if (shipmethod.get('internalid')="171") { %>
<% =_('Please note: For orders under $100, a $0.10/shopping bag fee will be applied to your order upon fulfillment, as required by City of Annapolis Ordinance 5-24. To learn more about the Annapolis Plastic Bag Ban Act, <a hred="https://www.annapolis.gov/2197/Plastic-Bag-Reduction-Act#:~:text=Effective%20January%2022%2C%202025%2C%20retailers,bring%20reusable%20bags%20for%20shopping." target="_blank"'>.')translate() %>
<% } else if(custentity6 && custentity6.length > 0 && shipmethod.get('internalid') == "5214") { %>
<% is_active = order_delivery_method === shipmethod.get('internalid') %>
<label class="delivery-option<%= is_active ? ' active' : '' %>" data-id="<%= shipmethod.get('internalid')%>" data-account="<%=custentity6[0].value%>">
<input
type="radio"
name="delivery-options"
id="delivery-options-<%= shipmethod.get('internalid')%>"
value="<%- shipmethod.get('internalid')%>"
<%= is_active ? 'checked' : '' %>
>
<span class="delivery-option-label">
<%= shipmethod.get('name') %>
</span>
</label>
<% } else if(shipmethod.get('internalid') != "5213" && shipmethod.get('internalid') != "5214") { %>
<% is_active = order_delivery_method === shipmethod.get('internalid') %>
<label class="delivery-option<%= is_active ? ' active' : '' %>" data-id="<%= shipmethod.get('internalid')%>">
<input
type="radio"
name="delivery-options"
id="delivery-options-<%= shipmethod.get('internalid')%>"
value="<%- shipmethod.get('internalid')%>"
<%= is_active ? 'checked' : '' %>
>
<span class="delivery-option-label">
<%= shipmethod.get('name') %>:
</span>
<span class="delivery-option-rate">
<%= shipmethod.get('rate_formatted') %>
</span>
</label>
<% } %>
<% } %>
<% }); %>
<% } %>
</fieldset>
没有我添加的部分的渲染 HTML 在这里：
<fieldset style="margin-bottom:36px;">
<legend class="delivery-options-header section-header">
Delivery Options:
</legend>
<span class="delivery-option-label">
<em>For Canadian shipping addresses, we recommend using USPS Priority Mail. To choose this option, select UPS Ground below and click Continue. Then continue checking out. On the Review Your Order page, use the text box at the bottom to request our staff to change the shipping method to USPS Priority Mail.</em>
</span><p></p><br><p></p>
<label class="delivery-option" data-id="5180">
<input type="radio" name="delivery-options" id="delivery-options-5180" value="5180">
<span class="delivery-option-label">
UPS 2nd Day Air®:
</span>
<span class="delivery-option-rate">
$31.97
</span>
</label>
<label class="delivery-option" data-id="5181">
<input type="radio" name="delivery-options" id="delivery-options-5181" value="5181">
<span class="delivery-option-label">
UPS 3 Day Select®:
</span>
<span class="delivery-option-rate">
$20.23
</span>
</label>
<label class="delivery-option" data-id="5182">
<input type="radio" name="delivery-options" id="delivery-options-5182" value="5182">
<span class="delivery-option-label">
UPS Next Day Air®:
</span>
<span class="delivery-option-rate">
$51.68
</span>
</label>
<label class="delivery-option" data-id="5178">
<input type="radio" name="delivery-options" id="delivery-options-5178" value="5178">
<span class="delivery-option-label">
UPS® Ground:
</span>
<span class="delivery-option-rate">
$16.41
</span>
</label>
<label class="delivery-option active" data-id="171">
<input type="radio" name="delivery-options" id="delivery-options-171" value="171" checked="">
<span class="delivery-option-label">
WAREHOUSE PICKUP (pick up in person at 214 Eastern Ave, Annapolis, MD USA):
</span>
<span class="delivery-option-rate">
Free!
</span>
</label>
</fieldset>
这是 JavaScript：
Shipping methods collection define('OrderShipmethod.Collection', ['OrderShipmethod.Model'], function (Model) { 'use strict'; return Backbone.Collection.extend({ model:
Model , comparator: 'name' }); }); Single ship method define('OrderShipmethod.Model', function () { 'use strict'; return Backbone.Model.extend({ getFormattedShipmethod: function ()
{ return this.get('name'); } }); }); selectDeliveryMethodRadioHandler: function (e) { var $selected_div = jQuery(e.target).closest('div') ,
selected_delivery_mehtod_id = $selected_div.data('deliverymethod-id') , selected_address_id = $selected_div.data('address-id') , a_line = this.wizard.model.get('lines').findWhere({'shipaddress': selected_address_id.toString()}) ,
is_delivery_already_set = a_line && a_line.get('shipmethod') === selected_delivery_mehtod_id.toString(); if (is_delivery_already_set) { e.preventDefault(); return false; } !this.canSaveChanges() && e.preventDefault();
this.selectDeliveryMethod(selected_delivery_mehtod_id, selected_address_id, true); } selectDeliveryMethod: function
(selected_delivery_mehtod_id, selected_address_id, save_changes) { if (this.canSaveChanges()) { var items_per_address = this.wizard.model.get('lines').groupBy(function (line) { return line.get('shipaddress'); }) , delivery_methods =
this.wizard.model.get('multishipmethods')[selected_address_id]; _.each(items_per_address[selected_address_id], function (item) { item.unset('shipmethod'); }); _.each(delivery_methods.where({check: true}), function (delivery_method) {
delivery_method.unset('check'); }); delivery_methods.get(selected_delivery_mehtod_id).set('check', true); if (save_changes) { this.step.disableNavButtons(); jQuery('[data-type="shipments-list"] input[type="radio"]').attr('disabled',
'disabled'); this.saveChanges(true) .then(function () { jQuery('[data-type="shipments-list"] input[type="radio"]').removeAttr('disabled'); }) .then(_.bind(this.step.enableNavButtons, this.step)); } } }
阅读您问题中包含的代码确实很难，但是，这仍然是一个相关的问题。基本上你不需要 JavaScript 来实现这一点。这可以使用 CSS 和 :has() 伪类 来完成。找到一个既是单选按钮（输入元素）又是您要显示/隐藏的文本元素的父元素的元素。然后设置“条件”，if
:has(input[value="4"]:checked)form {
display: flex;
flex-direction: column;
}
div.delivery div.info p {
display: none;
}
div.delivery:has(input[value="4"]:checked) div.info p[data-option="4"] {
display: block;
}<div class="delivery">
<h2>Delivery options:</h2>
<form name="shipping">
<label><input type="radio" name="method" value="1">UPS 1</label>
<label><input type="radio" name="method" value="2">UPS 2</label>
<label><input type="radio" name="method" value="3">UPS 3</label>
<label><input type="radio" name="method" value="4">Warehouse</label>
</form>
<div class="info">
<p data-option="4">Information about warehouse delivery...</p>
</div>
</div>