Question

我们，我制作了一个脚本，基本上为每个不同的单选按钮选项检查显示一个不同的DIV框，从一个已经选择的默认选项+开头显示的右边div开始。

继承我的jsfiddle： Demo

我也在我的网站上使用jQuery。如果我有更多可能的选项（最多10个），我对如何使JS代码更清晰，更简单和更简单有任何想法？

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

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

谢谢！

Answer 1

尝试这样的事情：

$("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
});

这样，您可以在每次更改时运行此代码，并根据值显示或隐藏内容！

请改变选择器中的值！

Answer 2

嗨，你可以做这样的事情

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

在每个div上你应该加上'euro'这个类以下是一个示例：http://jsfiddle.net/E9mUf/1/

Answer 3

将.hidden添加到所有div，然后根据所选值删除该类：

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

Answer 4

使用此代码使用data-*属性：

<强> 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>

<强>的jQuery

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

<强> jsFiddle example

将其扩展为10个选项只是意味着添加更多输入，无需更改JavaScript： jsFiddle example

选项更换器的Javascript改进

4 个答案: