Как переключить видимость div с помощью переключателей с помощью jQuery? - PullRequest
Новая
       64

Как переключить видимость div с помощью переключателей с помощью jQuery?

0 голосов
/ 20 ноября 2011

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

У меня есть набор из 20 вопросов в моей форме, и когда пользователь выбирает «Да», я бы хотел, чтобы текстовая область отображалась для этого конкретного вопроса, чтобы он мог ввести описание.

Раньше я сталкивался с проблемой, из-за которой переключатель «Да» переключал бы видимость всех текстовых полей на странице, но пытался обойти это с помощью parent().find('.toggle'), но он все еще не работает ,

Любая помощь, которую вы можете оказать, была бы великолепна!

Javascript: 

$('.toggle').hide();

$('.show').bind('change',function(){

    var showOrHide = ($(this).val() == 1) ? true : false;

    showOrHide.parent().find('.toggle').toggle(showOrHide);

})

HTML: 

<div class="question">
    <label>Question 1</label>
    <span class="options"> 
        No <input type="radio" class="show" value="0" id="question_1_no" name="question_1">
        Yes <input type="radio" class="show" value="1" id="question_1_yes" name="question_1">
        <br />
        <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea>
    </span> 
</div>

<div class="question">
    <label>Question 2</label>
    <span class="options"> 
        No <input type="radio" class="show" value="0" id="question_2_no" name="question_2">
        Yes <input type="radio" class="show" value="1" id="question_2_yes" name="question_2">
        <br />
        <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea>
    </span> 
</div>

1 Ответ

2 голосов
/ 20 ноября 2011

В следующей строке вы присваиваете true или false переменной showOrHide: 

var showOrHide = ($(this).val() == 1) ? true : false;

Затем вы пытаетесь вызвать метод jQuery для этого логического литерала, и, очевидно, это не сработает. Вместо этого используйте this снова. Вы также можете использовать siblings вместо того, чтобы подниматься на уровень: 

$(this).siblings('.toggle').toggle(showOrHide);

Вот рабочий пример .

В отдельном примечании вы могли бы немного упростить свой код, потому что 0 и 1 приведут к false и true, поэтому вам не нужен ваш условный оператор: 

$('.show').bind('change',function() {
    $(this).siblings('.toggle').toggle($(this).val());
});

Кроме того, если вы используете последнюю версию jQuery (1.7), вы должны использовать on вместо bind.

...