对选项转换器的Javascript改进

我知道，伙计们， 我制作了一个脚本，它基本上为每个不同的单选按钮选项检查显示一个不同的DIV框，从一个已经选择的默认选项开始，再加上开始显示的右DIV

以下是我的JSFIDEL：

我还在我的网站上使用jQuery。如果我有更多可能的选择（最多10个），我可以如何使JS代码更干净、更简单、更简单

请记住，我用于value=”“的数字是一个介于1和1000之间的随机数（取决于mysql数据库条目）

---

谢谢

试试这样的方法：

$("input[name='radio-269']").change(function() {
 /* your code upto now!
 if ($(this).val() == "1") {
   $('#1').removeClass("hidden");
   $('#2').addClass("hidden");
   $('#3').addClass("hidden");
 } */

 /* try this: */
 var val = $(this).val(); // get the value from the select element
 $('selector').addClass('hidden'); // add class to all!
 $('#' + val).removeClass('hidden'); // remove hidden class from the required
});

这样，您可以在每次发生更改时运行此代码，具体取决于显示或隐藏内容的值

---

请更改选择器中的值

嗨，你可以这样做

$("input[name='radio-269']").change(function() {
    var val = $(this).val();
    $("div.euro").hide();
    $("#"+val).show();
});

在每个div中，你应该添加“euro”类

---

下面是一个示例：

将

.hidden

添加到所有div，然后根据选择的值删除类：

<script type="text/javascript">
    $("input[name='radio-269']").change(function() {
        $('div').addClass('hidden');
        $('div#'+this.value).removeClass('hidden');
    });
</script>

$（“输入[name='radio-269']”）。更改（函数（）{
$（'div'）.addClass（'hidden'）；
$（'div#'+this.value）.removeClass（'hidden'）；
});

使用此代码使用

数据-*

属性：

HTML

<input type="radio" name="radio-269" data-foo="10" value="1" checked="checked" />
<input type="radio" name="radio-269" data-foo="20" value="2" />
<input type="radio" name="radio-269" data-foo="30" value="3" />
<div id="target">10 €</div>

---

将它扩展到10个选项只意味着添加更多的输入，不需要JavaScript更改：

您是否计划将div id始终作为单选按钮的值？这个问题更适合这个问题

<input type="radio" name="radio-269" data-foo="10" value="1" checked="checked" />
<input type="radio" name="radio-269" data-foo="20" value="2" />
<input type="radio" name="radio-269" data-foo="30" value="3" />
<div id="target">10 €</div>

$("input[name='radio-269']").change(function () {
    $('#target').html($(this).data('foo') + ' €')
});