相同名称和值的 JQuery 单选按钮 - 单击单选按钮时显示隐藏的 div |埃克维德

Question

我正在使用 Ecwid 购物车，并希望根据是否选中单选按钮来隐藏/显示产品中的某些选项。

我的测试产品在这里：

http://www.farmboutique.com/testproduct1.html#!/~/product/category=5128132&id=21349373

我隐藏了一些使用 javascript 加载页面时的选择。

现在我想在有人单击以下单选按钮时显示隐藏的选择：

是（不超过 9 厘米 x 9 厘米）（+4.50 英镑）

在“您是否需要刺绣徽标”选项下。

加载页面时始终选择默认值“不需要”。

同样，如果有人在页面加载后单击“是”选项，然后通过选择“不需要”改变主意，它应该会使其他选项再次消失。

“是（不超过 9 厘米 x 9 厘米）（+4.50 英镑）”和“不需要”单选按钮的 html 代码是：

    <div id="ecwid-productoption-21349373-Do_You_Require_An_Embroidered_Logo-container" class="ecwid-productBrowser-details-optionPanel ecwid-productBrowser-details-optionPanel-radio ecwid-productoption-Do_You_Require_An_Embroidered_Logo-container">

    <label class="ecwid-fieldLabel" for="gwt-uid-5">Do You Require An Embroidere​d Logo</label>

    <div id="gwt-uid-5"><span class="gwt-RadioButton ecwid-productBrowser-details-optionRadioButton ecwid-productoption-Do_You_Require_An_Embroidered_Logo-Yes_:0028no_more_than_9cm_x_9cm:0029" id="ecwid-productoption-21349373-Do_You_Require_An_Embroidered_Logo-Yes_:0028no_more_than_9cm_x_9cm:0029">

    <input type="radio" name="21349373-Do You Require An Embroidered Logo" value="on" id="gwt-uid-3" tabindex="0">

    <label for="gwt-uid-3"><span class="ecwid-productBrowser-details-optionRadioButton-name">Yes (no more than 9cm x 9cm)</span>

    <span class="ecwid-productBrowser-details-optionRadioButton-price"> <span class="ecwid-productBrowser-details-optionRadioButton-bracket">(</span>

    <span class="ecwid-productBrowser-details-optionRadioButton-sign">+</span>

    <span>£</span>4.50<span class="ecwid-productBrowser-details-optionRadioButton-bracket">)</span></span></label></span>

    <span class="gwt-RadioButton ecwid-productBrowser-details-optionRadioButton ecwid-productoption-Do_You_Require_An_Embroidered_Logo-Not_Required" id="ecwid-productoption-21349373-Do_You_Require_An_Embroidered_Logo-Not_Required">

<input type="radio" name="21349373-Do You Require An Embroidered Logo" value="on" id="gwt-uid-4" tabindex="0" checked="">

<label for="gwt-uid-4"><span class="ecwid-productBrowser-details-optionRadioButton-name">Not Required</span></label></span></div></div>

上面的21349373是product Id = page.productId

Answer 1

我认为你可以这样做。主要问题是我找不到任何有效的选择器来定位您的单选按钮，因为它的名称中有空格，我不能确定生成的 id 不会改变。尝试在您的元素上添加一些静态属性，以便更轻松地查询它们。如果您无法控制id 和name 属性，则可以添加一些其他自定义属性。

$(function () {
    //get a reference to your hidden div
    var $divIfRequired = $('[id*=If_you_require_a_logo_to_be]');

    //add a click handler on your radio button
    $('put_some_selector_here').click(function () {
        //show or hide the div based on the checked status of the radio button
        $divIfRequired[this.checked? 'show': 'hide']();
    });
});