Question

这是我的剧本：

<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上镜像。

我哪里错了？

感谢您的帮助。

Answer 1

你可以很简单地做到：

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

Answer 2

尝试使用 :visible-selector ，

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);
        }        
    );
});

Answer 3

您可以尝试使用.is(':visible')

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

}

Answer 4

尝试

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());
    });
})

演示：Fiddle

只有满足条件时才会发生jquery事件

4 个答案: