Блог

У меня есть группа переключателей, в которых вы можете выбрать свою сумму. Последний вариант — Другой. Я бы хотел, чтобы эта опция отображала поле суммы после его проверки. Это построено с использованием jquery mobile.

Ссылка jsFiddle

 <fieldset data-role="controlgroup">
<legend>Select Amount</legend>
<input type="radio" name="amount" id="50" value="50" checked="checked"/>
<label for="50">$50</label>

<input type="radio" name="amount" id="100" value="100"/>
<label for="100">$100</label>

<input type="radio" name="amount" id="250" value="250"/>
<label for="250">$250</label>

<input type="radio" name="amount" id="500" value="500"/>
<label for="500">$500</label>

<input type="radio" name="amount" id="1000" value="1000"/>
<label for="1000">$1000</label>

<input type="radio" name="amount" id="other" value="other"/>
<label for="other">Other</label>
    <div id="enter_amount">
        <label for="other_amount">Enter Amount:</label>
        <input type="text" name="other_amount" id="other_amount" value="" data-theme="d"  />
    </div>
</fieldset>
  

Что мне нужно написать, чтобы это сработало? В настоящее время я пытаюсь выполнить следующее:

 $(document).ready(function(){
    $("#enter_amount").css("display","none");
        $("#other").click(function(){
        if ($('#other:checked')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});
  

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

Используйте .change вместо .click . Также я изменил ваш код, чтобы учесть некоторые другие сценарии. Вот скрипка.

 $(document).ready(function(){
    $('#enter_amount').hide(); 
    $('fieldset :radio').change(function(){
       if( this.id === 'other' )
           $('#enter_amount').slideDown('slow'); 
        else if( $('#enter_amount').is(':visible') )
           $('#enter_amount').slideUp('slow');               
    }); 
});
  

Это переключатели, поэтому, когда другой переключатель установлен, другой флажок по умолчанию будет снят. Поэтому вы должны привязываться ко всем входам с именем ‘amount’. Также использование jQuery.is () было бы лучшим подходом для проверки того, установлен ли флажок. Также используйте событие jQuery.change()

 $(document).ready(function(){
    $("#enter_amount").css("display","none");
    $('input[name="amount"]').change(function(){
        if ($(this).is('#other')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});
  

Вот рабочая скрипка http://jsfiddle.net/jafmC/13 /

вы должны изменить его на:

 if ($(this).is(":checked")) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
  

Попробуйте это

 $(document).ready(function(){
    $("#enter_amount").css("display","none");
        $("#other").click(function(){
        if ($(this).is(':checked')) {
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});
  

Поскольку вы на самом деле больше не взаимодействуете с самими переключателями (для просмотра используйте функцию «проверить элемент» в Firebug, Web Inspector или Dragonfly), а вместо этого с элементами, предоставляемыми jQuery Mobile (или jQuery UI), вам необходимо изменить свои селекторы:

 $(document).ready(function() {
    $("#enter_amount").css("display", "none");
    $(".ui-radio").click(function() {
        if ($(this).has('#other') amp;amp; $(this).has('.ui-icon-radio-on')){
            $('#enter_amount').slideDown(500); // works
        }
        else {
            $('#enter_amount').slideUp(500); // doesn't yet work
        }
    });
});
  

Демонстрация JS Fiddle.

Отредактировано (должен признаться, после некоторого раздражения), чтобы добавить улучшенный (т.Е. «функционирующий») if / else проверить:

 $(document).ready(function() {
    $("#enter_amount").css("display", "none");
    $(".ui-radio").click(function() {
        if ($(this).find('#other').length) {
            $('#enter_amount').slideDown(500);
        }
        else {
            $('#enter_amount').slideUp(500);
        }
    });
});
  

Демонстрация JS Fiddle.

 $(document).ready(function(){
    $("#enter_amount").hide();

    $("input[name='amount']").change(function(){

        if($(":checked").val() == "other"){
            $("#enter_amount").slideDown("slow"); //Slide Down Effect
        } else {
            $("#enter_amount").slideUp("slow");  //Slide Up Effect
        }
    });
});
  

вы могли бы попробовать это