2014-11-04 6 views
2

Я пытаюсь использовать jQuery's .toggle(), чтобы показать и скрыть один из трех div. У divs есть уникальные идентификаторы, и решение, которое делится div, основано на том, какая из трех переключателей была выбрана. Три переключателя имеют значения, соответствующие идентификаторам div. Поэтому, если кто-то нажимает на радиостанцию ​​-1, div должен быть переключен с id cMB_0292_A07.m1.Переключить вопрос, используя входное значение как id

Однако я не получаю никакого ответа вообще, и нет отчета о каких-либо ошибках в отладчике, которые я пробовал. Что не так?

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script> 
     function showdiv(obj) { 
      var n = obj.name; 
      var v = $("input:radio[name='" + n + "']:checked").val(); 
      alert(v); 
      $("#" + v).toggle(); 
     } 
    </script> 
</head> 
<body> 
    <input name="cMB_0292_A07" value="cMB_0292_A07.m1" onclick="showdiv(this);" type="radio">-1 
    <input name="cMB_0292_A07" value="cMB_0292_A07.0" onclick="showdiv(this);" type="radio">0 
    <input name="cMB_0292_A07" value="cMB_0292_A07.p1" onclick="showdiv(this);" type="radio">+1 
    <div id="cMB_0292_A07.m1" style="display: none">minus1</div> 
    <div id="cMB_0292_A07.0" style="display: none">zero</div> 
    <div id="cMB_0292_A07.p1" style="display: none">plus1</div> 
</body> 
</html> 

ответ

3

Это фактически две части вопрос

Во-первых, вы не должны . внутри идентификаторов.

Во-вторых, JQuery видит это: $('#ID.CLASS') Он ищет DOM-ищет ID: cMB_0292_A07 то класс ребенок m1, например.

Вы можете исправить это, удалив периоды в своих идентификаторах или используя селектор регулярных выражений [id=""].

$('[id="' + v + '"]').toggle(); 

jsFiddle DEMO


Другие sidenotes, не используйте onClick события. Лучше отделить логику бизнеса &. Используйте jQuery .on('click', function() {}); событий!

+1

Не только рядный JS 'onclick' устарела,' вар п = obj.name; var v = $ ("input: radio [name = '" + n + "']: checked"). val(); 'является избыточным кодом (вместо простого' var v = obj.value; '). – Regent

+1

Я потратил четыре часа, пытаясь понять это. Конечно!!! Иды были сгенерированы из имени файла, поэтому они и были. в них. Спасибо огромное @mcpDESIGNS – user3275142

+0

Спасибо @Regent Я изменил это сейчас. Кстати, что следует использовать вместо 'onclick'? – user3275142

0

Вы не можете использовать ., так как он будет искать своего ребенка с классом m1 или 0 или p1.

Проверьте ниже фрагменте кода:

$(document).ready(function(){ 
 
    $("input[type='radio']").click(function(){ 
 
     alert($("#"+$(this).val()).length); 
 
     }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">-1 
 
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">0 
 
<input name="cMB_0292_A07" value="cMB_0292_A07" type="radio">+1 
 
<div id="cMB_0292_A07" style="display: none">minus1</div> 
 
<div id="cMB_0292_A07" style="display: none">zero</div> 
 
<div id="cMB_0292_A07" style="display: none">plus1</div>

Смежные вопросы