Событие jquery, только если условие выполнено

Question

Событие jquery, только если условие выполнено

0

Это мой сценарий:

<script>

if( $('.mydiv').css('display') == 'block'){
    $(".input_a").keyup(function(){
        $(".input_b").val( this.value );
    }); 
};

$('.mybutton').toggle(
    function(){
        $('.mydiv').css('display','none');
        $(".input_b").val('');
        // now, the event inside the "IF" here above should not occur but it does...
    },
    function(){
        $('.mydiv').css('display','block');
        var f1 = $(".input_a").val();
        $(".input_b").val(f1);
    }        
);

</script>

Что я делаю:

Мне нужно ввести поля и отобразить div.

Если показан div, я хочу, чтобы вход B был точной копией входа A (в реальном времени)
если div скрыт, я хочу, чтобы вход B был очищен и готов к заполнению.
Вот где у меня проблема: если div скрыт, набрав что-то на входе A, НЕ следует отражать на входе B.

Это то, о чем мой сценарий, но "IF", похоже, не работает, как когда div скрыт, заполнение входа B по-прежнему зеркально отражается на входе B.

Где я ошибаюсь?

Спасибо за помощь.

Baylock 20 фев. 2014, в 06:49

Источник

0

Опубликовать HTML-код.
Ali.Rashidi 20 фев. 2014, в 05:47

Теги:

jquery

eventtrigger

condition

4 ответа

2

Вы можете сделать это очень просто:

<script>
    $(".input_a").keyup(function(){
        if($('.mydiv').is(':visible')){
            $(".input_b").val($(this).val());
        }else {
            $(".input_b").val('');
        }
    }); 
</script>

Dat Nguyen 20 фев. 2014, в 03:17

0

Это, вероятно, не соответствует моим потребностям, так как на самом деле проще с одной парой входов, но это становится более сложным (слишком много одинаковых условий), когда у вас есть целая форма для обработки таким образом.
Baylock 20 фев. 2014, в 12:46

1

Вы можете попробовать с .is(':visible')

if( $('.mydiv').is(':visible')){

}

Prashobh 20 фев. 2014, в 04:22

0

Я уже пробовал, но результат тот же.
Baylock 20 фев. 2014, в 12:46

1

Пытаться

jQuery(function ($) {
    //cache variables
    var $ina = $(".input_a"),
        $inb = $(".input_b"),
        $div = $('.mydiv');
    $ina.keyup(function () {
        //check the condition within the keyup handler
        if ($div.is(':visible')) {
            $inb.val(this.value);
        };
    });

    $('.mybutton').toggle(function () {
        $div.hide();
        $inb.val('');
    }, function () {
        $div.show();
        $inb.val($ina.val());
    });
})

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

Arun P Johny 20 фев. 2014, в 03:07

0

Спасибо, это сработало. «виден» один, не хватило
Baylock 20 фев. 2014, в 15:41

Ещё вопросы

Это, вероятно, не соответствует моим потребностям, так как на самом деле проще с одной парой входов, но это становится более сложным (слишком много одинаковых условий), когда у вас есть целая форма для обработки таким образом.
Я уже пробовал, но результат тот же.
Спасибо, это сработало. «виден» один, не хватило

Rohan Kumar · Accepted Answer · 2014-02-20T04-05-00.000Z

Попробуйте использовать : видимый-селектор,

if( $('.mydiv:visible').length){
    $(".input_a").keyup(function(){
        $(".input_b").val( this.value );
    }); 
};

Или вы можете использовать is() как

if( $('.mydiv').is(':visible')){
   ...
}

Используйте $('.mydiv').hide(); вместо $('.mydiv').css('display','none');

И используйте $('.mydiv').show(); вместо $('.mydiv').css('display','block');

Чтение hide() и show()

Попробуйте полный код

$(function(){
    if( $('.mydiv').is(':visible')) {// use is and :visible selector
        $(".input_a").keyup(function(){
            $(".input_b").val( this.value );
        }); 
    };

    $('.mybutton').toggle(function(){
            $('.mydiv').hide(); // use hide()
            $(".input_a").off('keyup');// off/remove the keyup event
            $(".input_b").val('');
        }, function(){
            $('.mydiv').show();// use show()
            var f1 = $(".input_a").val();
            $(".input_b").val(f1);
        }        
    );
});