Question

这是一个菜鸟问题。我搜索了单选按钮jquery的东西，我感到困惑，因为有很多动态单选按钮等。无论如何，我正在尝试做一个简单的Show / Hide div thingie。

但由于某种原因，我的代码总是返回相同的＆＃34; 3＆＃34;对于单选按钮，无论选择什么。

所以这是我的HTML：

<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<script src="testjq.js"></script>
</head>

<body>
<div id="radios">


    <input type="radio" id="radio1" name="radBut" checked="checked" value="1">
    1
  <br>

    <input type="radio" id="radio2" name="radBut" value="2">
    2
  <br>

    <input type="radio" id="radio3" name="radBut" value="3">
    3<br>

    <span id="VAL">value is = </span>
  <br>

</div>
<div id="story1">
Story 1
</div>
<div id="story2" style="display:none">
Story 2
</div>
<div id="story3" style="display:none"> 
Story 3
</div>

这里是testjq.js中的jQuery / java

$(document).ready(function() {
    var testVar = 1;
        $('input:radio[name=radBut]:checked').val(); {
            var testVar = $(this).val();
        }
        if (testVar = 3){
            $("#story3").show();
            $("#story2").show();
            $("#story1").show();
            }
        else if (testVar = 2){
            $("#story3").hide();
            $("#story2").show();
            $("#story1").show();
            }
        else {
            $("#story3").hide();
            $("#story2").hide();
            $("#story1").show();
        }
        $('#VAL').append(testVar);

});

关于我错了什么的任何建议？

Answer 1

这个块在这里：

$('input:radio[name=radBut]:checked').val(); {
        var testVar = $(this).val();
}

应该是：

testVar = $('input:radio[name=radBut]:checked').val();

没有必要重新声明这个变量，因为它已经被声明了。

此外，您的所有if条件只有一个=，他们需要两个==

Answer 2

if (testVar = 3){

实际上，“将testVar设置为3然后返回true”，因为=是赋值运算符。您需要等于运算符==：

if (testVar == 3){

同样，请看

else if (testVar = 2){

这需要对==进行相同的更改。

另外，看看这个：

$('input:radio[name=radBut]:checked').val(); {
    var testVar = $(this).val();
}

这是有效的JS，但它不符合你的想法。它说“获取复选框的值，然后忽略它，然后将testVar设置为value的{{1}}。”这不是你的意思。这样做：

document

请注意，vat testVar = $('input[name=radBut]:checked').val();选择器是不必要的，会显着减慢选择速度。

Answer 3

testVar 将永远是你的意思。要进行比较，您必须使用'=='符号。使用'='表示您正在为变量赋值。

你也可以使用更安全的'==='。

Answer 4

与其他人说的一样，我把它变得更好了。至少清洁。

首先，我将您的代码放在检查testVar的位置并将其放入函数中：

function testWithVar(testVar) {
    //store all the story divs in a variable
    var stories = $('[id^="story"]')
    //hide all the variables and show the variables according to testVar
    stories.hide().filter(':lt(' + testVar + ')').show();
    //append the value
    $('#VAL').html("value is = " + testVar);
}

所以在ready中，你会这样称呼它：

$(document).ready(function () {
    testWithVar(1);
});

并且，如果您想在每次选择广播组中的值时更改testVar，请在change中发出testWithVar事件，该事件将调用ready个功能：

$(document).ready(function () {
    testWithVar(1);
    $('input:radio[name=radBut]').change(function () {
        testWithVar(this.value);
    });
});

演示：http://jsfiddle.net/CQDyz/

参考文献：

jquery单选按钮没有返回正确的值

4 个答案: