JQuery же функция несколько идентификаторов

Question

JQuery же функция несколько идентификаторов

0

Я пытаюсь получить окно ввода, чтобы быть видимым/не видимым в зависимости от того, выбрана ли радиокнопка "Да" или "Нет".

Я назначил идентификатор для каждого div, где находится поле ввода текста.

<tr>
    <td>Acknowledged within 30 secs</td>
    <td>
        <div class="radio"><input type="radio" value="1" name="greet"> Yes</div>
        <div class="radio"><input type="radio" value="0" name="greet"> No</div>
    </td>
</tr>
<tr>
    <td></td>
    <td>
        <div id="greet-info" class="hidden">
        <input type="text" class="textbox" placeholder="Tell us more" id="greet_more" name="greet_more">
        </div>
    </td>
</tr>


    $("input[name='greet']").change(
    function(){
        if($('input[name=greet]:checked').val()=="0"){
            $('#greet-info').removeClass("hidden");
        }else{
            $('#greet-info').addClass("hidden");
        }

    }
);
$("input[name='menu']").change(
    function(){
        if($('input[name=menu]:checked').val()=="0"){
            $('#menu-info').removeClass("hidden");
        }else{
            $('#menu-info').addClass("hidden");
        }

    }
); 
$("input[name='drinks_menu']").change(
    function(){
        if($('input[name=drinks_menu]:checked').val()=="0"){
            $('#drinks_menu-info').removeClass("hidden");
        }else{
            $('#drinks_menu-info').addClass("hidden");
        }

    }
);

Поскольку у меня много вопросов, они распространяются на 5 страниц. Мне понадобится много ящиков ввода, и поэтому мне придется переписывать функцию каждый раз. Мне было интересно, как я могу это сделать, поэтому мне нужно написать только одну функцию?

Благодарю!

Matt 05 янв. 2014, в 03:37

Источник

0

все ли входы следуют за тем же шаблоном как tr s
Arun P Johny 05 янв. 2014, в 02:01

Теги:

javascript

jquery

html

2 ответа

1

проще всего было бы:

function bindInput(selector, id) {
  $(selector).change(
    function(){
        if($(selector + ':checked').val()=="0"){
            $(id).removeClass("hidden");
        }else{
            $(id).addClass("hidden");
        }

    }
  );
}


bindInput("input[name='greet']",'#greet-info')
bindInput("input[name='menu']",'#menu-info')
bindInput("input[name='drinks_menu']",'#drinks_menu-info')

Sergei Zahharenko 05 янв. 2014, в 00:54

0

Это не принимает во внимание, что каждый вход должен вызывать событие в соответствующем div, т.е. с тем же идентификатором.
Purple Hexagon 05 янв. 2014, в 02:05
0

да, исправил эту маленькую штуковину :)
Sergei Zahharenko 05 янв. 2014, в 02:09

Ещё вопросы

все ли входы следуют за тем же шаблоном как tr s
Это не принимает во внимание, что каждый вход должен вызывать событие в соответствующем div, т.е. с тем же идентификатором.
да, исправил эту маленькую штуковину :)

Arun P Johny · Accepted Answer · 2014-01-05T00-11-00.000Z

Если ваш html следует той же структуре по всем элементам, тогда

$('table input[type="radio"]').change(function(){
    $(this).closest('tr').next().find('div').toggle(this.value == 1 && this.checked)
})

Демо: скрипка

Отлично, спасибо! в этом случае он придерживается той же структуры. Мне пришлось избавиться от class = "hidden" и поменять его на style = "display: none"; который отлично работает не уверен, почему он не был счастлив с классом?
@Matt отлично смотрится и с классом jsfiddle.net/arunpjohny/ytuRM/2
Я обнаружил, что CSS-файл, в конце которого есть класс, также называемый .hidden с! Важный, думаю, он не позволяет ему отображаться.