jquery hide работает только один раз

у меня есть область, которая изначально скрыта и должна появляться/исчезать в зависимости от содержимого поля.

так вот если пользователь выбирает оплату кредитной картой - то лишние поля открываются, если нет - то исчезают.

проблема в том, что он работает только для того, чтобы показать их, а не скрыть.

может кто-нибудь посмотреть здесь: http://bit.ly/dOCNQQ

Заранее спасибо!

$(function(){ 
    $('#CCinfo').hide();       
    $('#paymethod').change(function(){
    var payme = $(this).val();
    if (payme=='CreditCard') {
            $('#CCinfo').show("slow");
        } else {
            $('#CCinfo').hide();    
        }
    });
});

<tr>
 <td colspan="2" align="right">
  <strong>pay by:</strong><br />
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="CreditCard"/>credit card<br />
  <tr>
   <td colspan="2" align="right"><strong>pay by:</strong><br />
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="CreditCard"/>credit card<br />&nbsp;
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="Check"/>cash<br />&nbsp;
    <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="At Dinner"/>check
   </td>
  </tr>
  &nbsp;
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="Check"/>cash<br />&nbsp;
  <input type="radio" name="paymethod" id="paymethod" title="*" class="required" value="At Dinner"/> check
 </td>
</tr>

hide jquery show
person kneidels    schedule 07.03.2011    source источник
comment
Извините, но Stackoverflow не является платформой отладки по требованию. Вам нужно будет извлечь код, который вы считаете неправильным, опубликовать его здесь, и тогда кто-нибудь сможет вам помочь. Размещая ссылку на страницу и запрашивая отладку, вы ничего не даете сообществу, потому что заданный вами вопрос не будет полезен никому, кроме вас.   -  person fresskoma    schedule 08.03.2011
comment
Это круто, я не против отладки.   -  person Dimitry    schedule 08.03.2011

Ответы (3)


arrow_upward
1
arrow_downward

В вашем примере несколько входов имеют один и тот же идентификатор «paymethod», который вы затем используете для прослушивания события change. В HTML атрибут id элемента должен быть уникальным, когда вы вызываете $("#paymethod"), он находит только первый ввод с этим идентификатором. Вы должны либо удалить общий атрибут id, либо создать уникальные. Вы должны использовать атрибут name для поиска радиовходов.

Таким образом, HTML будет примерно таким:

<td align="right" colspan="2"><strong>pay by:</strong><br>
    <input type="radio" value="CreditCard" class="required" title="*" name="paymethod">credit card<br>&nbsp;
    <input type="radio" value="Check" class="required" title="*" name="paymethod">cash<br>&nbsp;
    <input type="radio" value="At Dinner" class="required" title="*" name="paymethod"> check
</td>

JS для получения радиоэлементов будет:

$("input[name='paymethod']").change(function() { ... });
person Adam Ayres    schedule 07.03.2011

arrow_upward
1
arrow_downward

Все ваши переключатели имеют одинаковый идентификатор. Когда вы выбираете $('#paymethod').val(), вы получаете только значение первого переключателя. Кстати, это всегда кредитная карта.

Пытаться:

$('input[name="paymethod"]').click(function (e) {
    if (e.target.value == 'CreditCard') {
        $('#CCinfo').show("slow");
    } else {
        $('#CCinfo').stop().hide();
    }
});
person Dimitry    schedule 07.03.2011

arrow_upward
0
arrow_downward

Я посмотрел на ваш код. У вас не может быть нескольких элементов ввода с одним и тем же идентификатором. Причина, по которой это происходит в вашем коде, заключается в том, что обработчик кликов работает только с первым элементом с идентификатором в качестве метода оплаты, а не с двумя другими. Просто используйте общий класс для всех них и привяжите обработчик кликов к этому классу.

person Munim    schedule 07.03.2011