JQuery Hide работает только один раз - PullRequest
Новая
       2

JQuery Hide работает только один раз

0 голосов
/ 08 марта 2011

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

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

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

может кто-то, пожалуйста, посмотрите здесь: 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>

Ответы [ 3 ]

1 голос
/ 08 марта 2011

В вашем примере несколько входов имеют одинаковый идентификатор "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() { ... });
1 голос
/ 08 марта 2011

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

Попробуйте: 

$('input[name="paymethod"]').click(function (e) {
    if (e.target.value == 'CreditCard') {
        $('#CCinfo').show("slow");
    } else {
        $('#CCinfo').stop().hide();
    }
});
0 голосов
/ 08 марта 2011

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

...