На переключателе выберите показ Div JQuery

0

Я использую три переключателя для отображения трех разных разделов. Но это не работает. вот мой сценарий

<script>

$(document).ready(function() {
$("input[name$='Want_To']").click(function() {
    var test = $(this).val();

    $("div.desc").hide();
    $("#Cars" + test).show();
});
});
</script>

Вот мой js-скрипт демонстрации моей работы:

http://jsfiddle.net/sam050/PHu99/

  • 0
    Вы добавили JQuery
  • 0
    любая ошибка в консоли вашего браузера
Показать ещё 2 комментария
Теги:

6 ответов

0
Лучший ответ

Вам нужно изменить значения ваших радиоэлементов в соответствии с вашим div. Также создайте общий класс для всех контейнеров div, чтобы одновременно отображался только один div,

Попробуйте t like,

$(document).ready(function () {  
    $(".item-div").hide();
    // show checked radio div
    $('#'+$('[name="Want_To"]:checked').val()).show();
    $("input[name='Want_To']").click(function () {
        var test = $(this).val();
        $(".item-div").hide();
        $("div.desc").hide();
        $("#" + test).show();
    });
});

Демо-версия

1

Попробуйте этот HTML-код

<div class="usertype">
    <ul>
        <li id="userpr">
            <label>I want to:</label>
            <input type="radio" name="Want_To" value="sell" id="Sell" checked />
            <label class="new-label selected" for="Sell">Sell</label>
            <input type="radio" name="Want_To" value="rent" id="Rent/Lease" />
            <label class="new-label" for="Rent/Lease">Rent/Lease</label>
            <input type="radio" name="Want_To" value="PG" id="Want-To-PG" />
            <label class="new-label" for="Want-To-PG">PG</label>
        </li>
    </ul>
    <div id="sell">Show sell div</div>
    <div id="rent">Show rent div</div>
    <div id="PG">Show PG div</div>
</div>

скрипт

$(document).ready(function() {
    $("#sell,#rent,#PG").hide();
    $("input[name$='Want_To']").click(function() {
        var test = $(this).attr('value');   console.log(test)
        $("#"+test).show().siblings('div').hide();
    });
});

DEMO

  • 1
    Хорошее использование братьев и сестер .......
1
.usertype{ border-bottom: 1px solid #E3E3E3; padding: 15px 12px;}
.usertype ul{margin-top:0px;}
.usertype ul li{margin-bottom:15px;}
.usertype ul li label{margin: 0px 15px 0px; width:160px;display:inline-block;vertical-align: top;background: none;
border: none; color: #666;}
.usertype input[type="radio"]:checked + .new-label{ color:#2C96D0 !important; border-color:#2c97d3; background:#2C96D0; }
.usertype ul li label.new-label {
    width: auto;
    margin-left: 15px;
    color: #9E9E9E;
    display: inline-block;
    font: 700 13px/31px Open Sans Bold,Arial,Helvetica,sans-serif;
    padding: 0px 10px;
    background: linear-gradient(to bottom, #E8E8E8 0%, #FFF 100%) repeat scroll 0% 0% transparent;
    border: 1px solid #D6D6D6;
    border-radius: 5px;}
.usertype input {
    margin-right: -30px;
}
#sell,#rent,#PG
{
    display:none;

}

и ваши js

$(document).ready(function() {
    $("input[name$='Want_To']").click(function() {
      $('#sell,#rent,#PG').hide();
        var test = $(this).val();

        $("div.desc").hide();
        $("#" + test).show();
    });
});

Я использовал немного другой подход здесь

Chec здесь демо Демо

  • 0
    работает .. но, кажется, вы забыли скрыть другой выбор при изменении выбора ...
  • 0
    Я знаю @GujjuDeveloper, но требование было выполнено;)
Показать ещё 2 комментария
0

Обновлен скрипт и добавлен JQuery

$(document).ready(function() {
    $("input[name$='Want_To']").click(function() {
        var test = $(this).val();

        $("div.desc").hide();
        $("#" + test).show();
    });
});

и обновленный html

<div class="usertype">
    <ul>
        <li id="userpr"><label>I want to:</label>
        <input type="radio" name="Want_To" value="sell" id="Sell"  checked /><label class="new-label selected" for="Sell">Sell</label>  
                <input type="radio" name="Want_To" value="rent"  id="Rent/Lease" /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
                <input type="radio" name="Want_To" value="PG" id="Want-To-PG" /><label class="new-label" for="Want-To-PG">PG</label> </li>
        <div id="sell" class="desc" style="display:none">
            Show sell div
        </div>
        <div id="rent" class="desc" style="display:none">
            Show rent div
        </div>
        <div id="PG"  class="desc" style="display:none">
            Show PG div
        </div>
    </ul>
</div>

Надеюсь, это сработает для вас. Удачи!

0

Попробуйте этот скрипт.

$(document).ready(function() {
    $("input[name$='Want_To']").click(function() {
        var test = $(this).val();
        console.log("#"+test);
        $(".a").hide();
        $("#"+test).show();
    });
});
0

сначала добавьте jquery на страницу yopur

то HTML будет

<div class="usertype">
    <ul>
        <li id="userpr"><label>I want to:</label>
        <input type="radio" name="Want_To" value="sell"  checked /><label class="new-label selected" for="Sell">Sell</label>    
                <input type="radio" name="Want_To" value="rent"  /><label class="new-label" for="Rent/Lease">Rent/Lease</label>
                <input type="radio" name="Want_To" value="PG"  /><label class="new-label" for="Want-To-PG">PG</label> </li>
        <div id="sell" class="desc">
            Show sell div
        </div>
        <div id="rent" class="desc">
            Show rent div
        </div>
        <div id="PG" class="desc">
            Show PG div
        </div>
    </ul>
</div>

и javascript-код будет

$(document).ready(function(){
       $("input[type='radio']").change(function() {
            var test = $(this).val();
            $("div.desc").hide();
            $("#" + test).show();
        });
});

Ещё вопросы

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