jquery单选按钮未返回正确的值

jquery单选按钮未返回正确的值,jquery,radio-button,show-hide,Jquery,Radio Button,Show Hide,这是一个很难回答的问题。我已经搜索了jquery单选按钮的内容,我感到困惑,因为有很多动态单选按钮等等。无论如何,我正在尝试做一个简单的显示/隐藏div的事情 但出于某种原因,无论选择了什么,我的代码总是为单选按钮返回相同的值“3” 这是我的html: <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script src="testjq.js"></script&g

这是一个很难回答的问题。我已经搜索了jquery单选按钮的内容,我感到困惑,因为有很多动态单选按钮等等。无论如何,我正在尝试做一个简单的显示/隐藏div的事情

但出于某种原因,无论选择了什么,我的代码总是为单选按钮返回相同的值“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>
关于我错了什么,有什么建议吗?

这一块就在这里:

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

testVar = $('input:radio[name=radBut]:checked').val();
无需重新声明此变量,因为它已声明

此外,如果所有的
条件只有一个
=
,则它们需要两个
=

此块:

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

testVar = $('input:radio[name=radBut]:checked').val();
无需重新声明此变量,因为它已声明

另外,如果所有的
条件只有一个
=
,则它们需要两个
=

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
设置为
document
值”。这样做:

vat testVar = $('input[name=radBut]:checked').val();
请注意,
:radio
选择器是不必要的,它会显著降低选择速度

也就是说,本质上,“将
testVar
设置为
3
,然后返回
true
”,因为
=
是赋值运算符。您需要相等运算符
==

if (testVar == 3){
同样,看看

else if (testVar = 2){
这需要对
==
进行相同的更改

另外,看看这个:

$('input:radio[name=radBut]:checked').val(); {
    var testVar = $(this).val();
}
这是有效的JS,但它不符合您的想法。它说“获取复选框的值,然后忽略它,然后将
testVar
设置为
document
值”。这样做:

vat testVar = $('input[name=radBut]:checked').val();
请注意,
:radio
选择器是不必要的,它会显著降低选择速度。

testVar将始终是您所认为的。要进行比较,必须使用“==”符号。使用“=”表示您正在为变量赋值

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

testVar将始终是您所认为的。要进行比较,必须使用“==”符号。使用“=”表示您正在为变量赋值


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

以及其他ppl所说的,我使lil更好。至少更干净

首先,我将您的代码放在检查
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
事件,该事件将调用
ready
中的
testWithVar
函数:

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

参考资料:


    • 和其他ppl所说的一样,我让lil变得更好。至少更干净

      首先,我将您的代码放在检查
      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
      事件,该事件将调用
      ready
      中的
      testWithVar
      函数:

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

      参考资料:


      如果每个人都能看到多丽丝·克罗克福德的视频就好了。如果每个人都看到多丽丝的克罗克福德的视频,他们就知道了。他们会知道你用通俗易懂的语言解释正在发生的事情有助于我的理解。我感谢你的帮助。你对正在发生的事情的通俗易懂的解释有助于我的理解。谢谢你的帮助。我正在努力理解你的代码。现在有点模糊,但是你在代码中的注释帮助很大。(主要是它的模糊原因,我的理解是低)这实际上有我想要的功能。一旦我对这件事了如指掌,它将对我大有裨益。我真的很感谢您在这方面的帮助:)我在底部添加了一些参考资料,以使您更了解:-)@SpikeyTheDesigner如果您认为其中一个答案对您有帮助,请将其标记为正确答案。:)我正在努力理解你的代码。现在有点模糊,但是你在代码中的注释帮助很大。(主要是它的模糊原因,我的理解是低)这实际上有我想要的功能。一旦我对这件事了如指掌,它将对我大有裨益。我真的很感谢您在这方面的帮助:)我在底部添加了一些参考资料,以使您更了解:-)@SpikeyTheDesigner如果您认为其中一个答案对您有帮助,请将其标记为正确答案。:)