使用prototype.js切换div可见性

Question

我想要这个html代码：

<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</li>
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</li>

并且我需要使用CCD_ 3切换与检查的无线电(name="payment[ebzc_option]")按钮相邻的CCD_。

有人能帮我做这个吗？我以前没有在prototype上工作过
关于在prototype.js中按名称属性(name="payment[ebzc_option]")选择单选按钮的任何提示

Answer 1

设置一个函数，无论是在页面加载时还是在单击单选按钮时都可以调用该函数。

function setSubmenuVisibility(){
$$('input[type="radio"]').each(function(elm){
if(elm.up('label') && elm.up('label').next('div')){
var sub = elm.up('label').next('div');
if(elm.checked){
sub.show();
}else{
sub.hide();
}
}
});
}
setSubmenuVisibility();
document.on('click', 'input[type="radio"]', function(evt, elm){
setSubmenuVisibility();
});

Answer 2

您可以使用元素切换可见性。切换

Answer 3

实现的多种方法

如果HTML是相同的，则可以使用DOM遍历方法

$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
this.nextSiblings().first().toggle();
});

在本例中，我们使用$$()选择所有具有名称属性payment[ebzc_option]的单选按钮，并使用invoke()方法调用所有单选按钮上的<div class="input-box">0。在事件处理程序的闭包中，this是事件发生的元素，然后使用nextSiblings()收集所有下一个同级，从数组中选择first()，并在其上运行toggle()。

这并不理想，因为它依赖于HTML结构来保持不变。

让我们尝试将一个id添加到要切换的div中(id需要像您发现的那样是唯一的)，并将该id添加到数据属性中的单选按钮中。数据属性可以是任何你想要的东西，只需要从data-开始

<div class="input-box" id="input-box_saved">
<input type="radio" name="payment[ebzc_option]" value="saved" data-toggle="input-box_saved" />

现在我们的观察员声明改为

$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$(this.readAttribute('data-toggle')).toggle();
});

您甚至可以扩展observer闭包，以确保一次只打开一个div

$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$$('.input-box').invoke('hide');
$(this.readAttribute('data-toggle')).show();
});

EDIT我没有注意到<input>和<div>不是兄弟，因为最后的</label>从盒子的右侧脱落。在这种情况下，DOM遍历需要更多的up()和down()才能使其工作。