具有相同名稱和值的JQuery單選按鈕 - 單擊單選按鈕時顯示隱藏div | Ecwid

Question

我正在使用Ecwid購物車，並希望根據是否選中單選按鈕來隱藏/顯示產品中的某些選項。

我的測試產品是在這裏：

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

我已經隱藏了一些選擇上加載使用JavaScript的網頁。

現在我想顯示隱藏的選項，當有人單選按鈕點擊次數：

是（不超過9釐米X9釐米更多）（+£4.50）

的選項下「你需要一個繡花標誌」。

加載頁面時始終選擇默認值「不需要」。

同樣，如果有人在頁面加載後點擊Yes選項，然後通過選擇「Not Required」來改變他們的想法，它應該使其他選項再次消失。

的單選按鈕的HTML代碼「是（不超過9釐米X9釐米）（+£4.50）」和「不需要」是：

<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在上面是產品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'](); 
    }); 
});