1

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

但由于某种原因，无论选择什么，我的代码总是为单选按钮返回相同的“3”值。

所以这是我的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);

});

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

4

4 回答 4

5

这块在这里：

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

应该：

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

不需要重新声明这个变量，因为它已经被声明了。

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

于 2013-06-24T17:14:40.440 回答
3 
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为valueof document。” 这不是你的意思。做这个：

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

请注意，:radio选择器是不必要的，并且会显着减慢选择速度。

于 2013-06-24T17:15:10.817 回答
0

连同其他人所说的，我把它做得更好了。至少更干净。

首先，我将您的代码放在您检查的地方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/

参考 ：

于 2013-06-24T17:27:58.647 回答
0

testVar将永远是你所等同的。要进行比较，您必须使用“==”符号。使用 '=' 意味着您正在为变量赋值。

您还可以使用更安全的'==='。

于 2013-06-24T17:23:27.910 回答