2013-06-24 8 views
1

Это вопрос без вопросов. Я обыскал вещи в jQuery Radio Button, и я запутался, потому что есть много динамических переключателей и т. Д. Во всяком случае, я пытаюсь сделать простое шоу/Hide div thingie.jQuery радиокнопка не возвращает правильное значение

, но по какой-то причине мой код всегда возвращает то же значение «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> 

и вот JQuery/Java, который находится в testjq.js

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

}); 

любые предложения относительно того, что я ошибалась?

+0

если только все видели видео Крокфорд в Дорис. они будут знать abt '===' – krishgopinath

ответ

0

Наряду с тем, что сказал другой ppl, я сделал это лучше. Чистит по крайней мере.

Сначала я принял ваш код, где вы проверить 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/

Ссылки:

+0

Я пытаюсь понять ваш код. сейчас его немного нечеткое, но ваши комментарии в коде очень помогают. (в основном его нечеткое значение, так как мое понимание низкое). На самом деле у меня есть функциональность, которую я искал. Как только я оберну свою голову вокруг, это мне очень поможет. Я очень ценю вашу помощь по этому поводу :) – SpikeyTheDesigner

+0

Я добавил несколько ссылок внизу, чтобы вы поняли больше :-) – krishgopinath

+0

@SpikeyTheDesigner, если вы думаете, что один из этих ответов помог вам, pls отметит его как правильный ответ. :) – krishgopinath

5

Этот кусок прямо здесь:

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

Должно быть:

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

Там нет необходимости повторно объявить эту переменную, поскольку она уже объявлена.

Кроме того, все ваши if условий есть только один =, они нуждаются в ДВА ==

+0

большое спасибо за вашу помощь. = D – SpikeyTheDesigner

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 в value из document». Это не то, что вы имеете в виду. Сделайте это:

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

Обратите внимание, что селектор :radio является ненужным и будет замедлять выделение вниз значительно.

+0

Ваше простое объяснение языка тому, что происходит в моем понимании. Я ценю вашу помощь. – SpikeyTheDesigner

0

testVar всегда будет тем, к чему вы его приравниваете. Чтобы сделать сравнение, вы должны использовать знак «==». Использование '=' означает, что вы присваиваете значение переменной.

Вы также можете использовать '===', который более защищен.