2013-09-12 1 views
1

Я попытался запустить это в jsfiddle.net и его отлично работать. http://jsfiddle.net/AdTK3/Работаю в jsfiddle.net, но не на моей странице

HTML

<input name="rdoNationality" class="rdoNationality" type="radio" checked="checked" value="nationalityAny" /> Div 1 
<input name="rdoNationality" class="rdoNationality" type="radio" value="nationalitySelect" /> Div 2 

<div id="nationalityAny"> 
Div 1 Selected 
</div> 
<div id="nationalitySelect" style="display:none;"> 
    Div 2 Selected 
</div> 

JQuery

$(function(){ 
    $(".rdoNationality").on("click", function(){ 
      var valNationality = $(this).val(), 
      divNationality = $("#" + valNationality); 

      $("div").hide(); 
       divNationality.show(); 
     }); 
}); 

Но когда я попробовал его на моей странице его не работает (Примечание: Я уверен, что мой путь к JQuery правильно). Вот мой полный HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Title Here</title> 
<meta name="keywords" content="kw here" /> 
<meta name="content-language" content="en" /> 
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
    $(".rdoNationality").on("click", function(){ 
      var valNationality = $(this).val(), 
      divNationality = $("#" + valNationality); 

      $("div").hide(); 
       divNationality.show(); 
     }); 
}); 

</script> 
</head> 
<body style="background:#fff;"> 
<div> 
     <input name="rdoNationality" class="rdoNationality" type="radio" checked="checked" value="nationalityAny" /> Div 1 
     <input name="rdoNationality" class="rdoNationality" type="radio" value="nationalitySelect" /> Div 2 

     <div id="nationalityAny"> 
      Div 1 Selected 
     </div> 
     <div id="nationalitySelect" style="display:none;"> 
      Div 2 Selected 
     </div> 
</div> 
</body> 
</html> 

Что не так с моим кодом. Благодарю.

+0

Какую версию jQuery вы ссылаетесь на свою локальную страницу? –

+0

Проверьте свою консоль на наличие ошибок. Также 'change' является лучшим событием для радио – Praveen

+0

убедитесь, что клятва к вашему файлу jquery.js верна. – bipen

ответ

0

Лучше добавить онлайн-версии JQuery CDN как

<script type="text/javascript" 
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

Также изменение к лучшему событие для радио и флажков. Так что попробуйте, как этот

$(function(){ 
    $(".rdoNationality").on("change", function(){ 
      var valNationality = $(this).val(), 
      divNationality = $("#" + valNationality); 

      $("div").hide(); 
       divNationality.show(); 
     }); 
}); 

Проверить это необработанный JSfiddle

+0

да Я также пробовал «изменить» –

+0

@PaulSanchez Проверьте эту скрипку http://jsfiddle.net/8GNEp/2/ – Praveen

+0

@ user1671639 это неправильный ответ, как насчет того, что у человека есть другой div на странице, проверьте свою скрипту обновления http://jsfiddle.net/8GNEp/6/. Я добавил дополнительный div, теперь вижу, что div также скрывается – SarathSprakash

-1

У вас не хватает document.ready функции ... смысл после того, как все элементы DOM БЫЛА loade в странице

<script type="text/javascript"> 
$(document).ready(function(){ 
     $(".rdoNationality").on("change", function(){ 
      var valNationality = $(this).val(), 
      divNationality = $("#" + valNationality); 

      $("div").hide(); 
       divNationality.show(); 
     }); 
}); 
</script> 
+0

'$ (function() {..' эквивалентно '$ (document) .ready (function() {'. Так что это не проблема здесь. – Praveen

0

Проблема из-за селектора $("div").hide();, это скроет все div в документе.

+0

Это скроет все права 'div'. проверьте вторую строку 'divNationality.show();'. Полностью его HTML имеет только 2 div. Это не причина. Вопрос под названием «Работа в jsfiddle.net, но не на моей странице» – Praveen

+0

@ user1671639 Его html имеет только два div теперь, но позже, если он добавит другие элементы на страницу Это снова будет проблемой, я прав или нет? Не спорю, Просто покажу, что я нашел неправильно – SarathSprakash

+0

Хороший вопрос. Но мой вопрос в том, почему он отвлекается от на самом деле вопрос? и я не знаю, что он собирается добавить новый div;) Вы даже можете проверить скрипту OP в комментариях. – Praveen

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