Question

我有这个HTML代码

<div id="testb">This will have a blue background the background when the below text will have disappeared</div>
<input class="loginButton" type="submit" value="Login" />
</div>
<div id="testa">this text will disappear when I click the button</div>

和这个jquery脚本

$('.loginButton').click(function (event) {
    $('#testa').toggle();
});

if ($('#testa').is(':visible')) {
    $("#testb").css("background-color", "red");
} else {
    $("#testa").css("background-color", "blue");
}

我想改变背景的颜色，这取决于#testa是否可见。我不想在click事件上实现代码。它没有用，为什么？

Answer 1

Jquery不会像这样执行动态绑定。你的if / else语句被评估一次（在运行时），并且该语句不再运行（除非它是另一个被多次调用的代码块的一部分）。

实现这一目标的唯一方法是实际评估testa可见性的状态，然后切换背景。

讨厌告诉你，但没有动作，就没有反应。 onclick是唯一的方法。

我建议你将if / else包装在一个函数中，并调用该函数：

$('.loginButton').click( function(event){
    $('#testa').toggle();  
    toggleBG(); 
});

function toggleBG{
    if($('#testa').is(':visible')) {
        $("#testb").css("background-color", "red"); 
    } else{
        $("#testa").css("background-color", "blue"); 
    }
}

对于记录，如果您想要紧凑，可以在一行中执行此操作：

$('.loginButton').click( function(event){
    $('#testa').toggle();  
    $("#testb").css("background-color", $('#testa').is(':visible') ? "red" : "blue");
});

Answer 2

因为您在网站加载时第一次检查is(':visible')，仅在那时。

如果您每次点击它都需要检查，则需要将is(':visible')放入切换功能

$('.loginButton').click( function(event){
    $('#testa').toggle(function() { 
        // this part will check everytime toggle load
        if($('#testa').is(':visible')) {
            $("#testb").css("background-color", "red"); 
        } else{
            $("#testa").css("background-color", "blue"); 
        }
    });   
});

// this will check at the first time
if($('#testa').is(':visible')) {
    $("#testb").css("background-color", "red"); 
} else{
    $("#testa").css("background-color", "blue"); 
}

Jquery with（＆＃39;：visible＆＃39;）和Toggle

2 个答案: