Показать и спрятать в jquery

0

Я попытался показать и спрятать в jquery в onload, но он не показал, может ли кто-нибудь посмотреть и предоставить решение. Я просто сделал onclick из списка переключателей, который хочет отображать.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(window).load = function () {
  $("#main input[name='B']").click(function () {
    alert("hiiii");
    if ($('input[name=B]:checked').val() == "country") {
      alert("country");


      $("#country").show();
      $("#state,#city").hide();

    }
    if ($('input[name=B]:checked').val() == "state") {
      alert("state");

      $("#state").show();
      $("#country,#city").hide();

    }
    if ($('input[name=B]:checked').val() == "city") {
      alert("city");

      $("#city").show();
      $("#country,#state").hide();

    }
  });
</script>

</head>

<body>
  <table cellpadding="0" cellspacing="0" border="2">
    <tr>
      <td>
        <input type="radio" name="B" value="country">
      </td>
      <td>Country</td>
      <td>
        <input type="radio" name="B" value="state">
      </td>
      <td>State</td>
      <td>
        <input type="radio" name="B" value="city">
      </td>
      <td>City</td>

    </tr>
  </table>

  Productline:
  <select id="productline">
    <option value="Motorcycles">Motorcycles</option>
    <option value="Planes">Planes</option>
    <option value="Ships">Ships</option>
    <option value="Trains">Trains</option>
  </select>
  <select id="country">
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Belgium">Belgium</option>
    <option value="Canada">Canada</option>
    <option value="Denmark">Denmark</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="Germany">Germany</option>
  </select>

  <select id="state">
    <option value="BC">BC</option>
    <option value="CA">CA</option>
    <option value="CT">CT</option>
    <option value="Isle&#32;of&#32;Wight">Isle&#32;of&#32;Wight</option>
    <option value="MA">MA</option>
    <option value="NH">NH</option>
    <option value="NJ">NJ</option>
    <option value="NSW">NSW</option>
    <option value="NV">NV</option>
  </select>
  <select id="city">
    <option value="Allentown">Allentown</option>
    <option value="Århus">Århus</option>
    <option value="Auckland&#32;&#32;">Auckland&#32;&#32;</option>
    <option value="Barcelona">Barcelona</option>
    <option value="Bergamo">Bergamo</option>
    <option value="Bergen">Bergen</option>
    <option value="Boston">Boston</option>
    <option value="Bräcke">Bräcke</option>
    <option value="Brickhaven">Brickhaven</option>
    <option value="Bridgewater">Bridgewater</option>
    <option value="Brisbane">Brisbane</option>
    <option value="Bruxelles">Bruxelles</option>
  </select>

</body>
  • 0
    Что-то вроде этого? jsbin.com/sekuzice/1/edit
  • 0
    Вы используете то же условие, if($('input[name=B]:checked').val()=="country") это правильно
Показать ещё 3 комментария
Теги:

6 ответов

1

Это неправильный синтаксис:

$(window).load =function()

правильный:

$(window).load(function()

Но мое предложение - использовать его на $(function(){}); документ готов.


Поэтому вы можете попробовать следующее:

добавьте id #main в таблицу:

<table cellpadding="0" cellspacing="0" border="2" id="main">
   //-------------------------------here----------^^^^^^^^

$(function(){ // <----document ready function shorter version
    $("#main :radio").on('change', function(){ // <---apply change event
        $('#'+this.value).show(); //<---show the target
        if($(e.target).val() == 'country'){
           $('#'+this.value).siblings('select:not(#productline)').hide(); 
        } //--^----------------------------------^hide only if country is checked
    });
});

Обновлено демо @Fiddle в соответствии с комментарием, предложенным kenshin.thebattosai

  • 0
    Просто проделал работу ... офигенно .... :)
  • 0
    извлеките обновленный js-код $('#'+this.value).show().siblings('select').hide(); обновить эту строку.
Показать ещё 6 комментариев
0

Вы усложняете ситуацию, не теряя возможности jQuery.

Вы можете просто изменить имена входных данных на location, добавить атрибут data-choose="location" в элементы select которые вам нужно показать или скрыть в зависимости от радио, и написать более простой и действительный код без hardcoding, например, "state", "city",, или "страны".

Смотрите это.

Это будет весь jQuery, в котором вы нуждаетесь:

$(function () {
    $('[data-choose="location"]').hide();
    $('[name="location"]').change(function () {
        $('[data-choose="location"]').hide();
        $('#'+$(this).val()).show();
    });
})

РЕДАКТИРОВАТЬ: Изменен. .click на. .change на совет Jai.

  • 0
    ЛОЛ! Вы должны понимать, какие элементы формы используют для каких событий
  • 0
    Я полагаю, ты прав. .click может быть .change , нет? Спасибо! :) Однако я не думаю, что селектор должен быть :radio так как это создаст проблемы, когда OP попытается добавить другой набор переключателей где-нибудь еще на своей странице. :)
0

попробуй что-нибудь вроде этого

 $(window).load(function(){
    $("input[name=B]").change(function(){
     if($('input[name=B]:checked').val()=="country")
     {
            alert("country");


            $("#country").show();
            $("#state,#city").hide();

     }
     if($('input[name=B]:checked').val()=="state")
     {
            alert("state");

            $("#state").show();
            $("#country,#city").hide();

     }
     if($('input[name=B]:checked').val()=="city")
     {
            alert("city");
            $("#city").show();
            $("#country,#state").hide();
     }
});
});
  1. У вас нет элемента #main
  2. $ (window).load = function() {должно быть $ (window).load(function() {
  3. используйте $ (document).ready(function() {вместо $ (window).load(function() {

АЛЬТЕРНАТИВНОЕ РЕШЕНИЕ

попробуйте сделать свой код простым

$(window).load(function(){
    $("input[name=B]").change(function(){
        var elem = "#" + $('input[name=B]:checked').val();
        if($(elem).length){
            $("#country,#state,#city").hide();
            $(elem).show();
        }
    });
});
0

Попробуй это:

$( document ).ready(function(e) {
    $("input[name=B]").click(function () {
        if ($('input[name=B]').is(':checked')) {
            var val =   $('input[name=B]:checked').val();
            switch(val){
                case "country":
                alert("country");
                $("#country").show();
                $("#state,#city").hide();
                break;

                case "state":
                alert("state");         
                $("#state").show();
                $("#country,#city").hide();
                break;

                case "city":
                alert("city");          
                $("#city").show();
                $("#country,#state").hide();
                break;
            }
        }
    });
});
0
  • У вас нет элемента #main
  • $(window).load =function() { должно быть $(window).load(function() {
  • вам не хватает });

http://jsbin.com/sekuzice/1/edit

0

обновить

$ (window).load to window.onload

и предоставить таблице атрибут id, который вы назначили

Ещё вопросы

Сообщество Overcoder
Наверх
Меню