Question

我在其中一个网页上有一个来自此网站CSS Toggle的切换按钮，我试图让它隐藏并显示一个select2框，就像切换一样。

所以在Document Ready上我隐藏了辅助盒，因为它不需要，然后是切换开关的逻辑：

$( "#s2id_author-search" ).hide();
$( "#searchSwitch_btn" ).click(function(){
    if($("#s2id_author-search").css('display') === 'none') {
        console.log("Showing author search: 1");
        $("#s2id_author-search").show();
        console.log("Hiding title search: 2");
        $("#s2id_title-search").hide();
    }
    else {
        $("#s2id_author-search").hide();
        console.log("Hiding author search: 3");
        $("#s2id_title-search").show();
        console.log("Showing title search: 4");
    }
});

当我在查看FireBug控制台时单击切换开关时，我可以看到所有console.log消息显示，这告诉我脚本正在完整执行，而不仅仅是一个或其他选项。

P.S。我知道在jQuery中使用toggle（）命令效率更高，但这就是代码现在用于故障排除的方式。

有什么想法吗？

Answer 1

更改您的条件：

    if($("#s2id_author-search").css('display') === 'none'){

为：

    if($("#s2id_author-search").is(':visible')){

Answer 2

好吧，试试这个

$( "#s2id_author-search" ).hide();

        $( "#searchSwitch_btn" ).click(function(){
            if($("#s2id_author-search").is(":visible")){
                 $("#s2id_author-search").hide();
                console.log("Hiding author search: 3");
                $("#s2id_title-search").show();
                console.log("Showing title search: 4");
            }
            else {               
                console.log("Showing author search: 1");
                $("#s2id_author-search").show();
                console.log("Hiding title search: 2");
                $("#s2id_title-search").hide();
            }
        });

Answer 3

您是否多次定义点击事件？如果是这样，该代码将运行两次，执行两个条件。 I.E.你在同一页上做了两次这样的事情：

$( "#searchSwitch_btn" ).click(...)

Answer 4

好的家伙和女孩们，所以我终于把它整理出来了。切换本身的代码如下：

       <label class="checkbox toggle candy blue" style="width: 150px;" id="searchSwitch_btn">
            <input type="checkbox" id="searchSwitch" checked="true" />
            <p>
                Search by
                <span class="switchBtn">Title</span>
                <span class="switchBtn">Author</span>
            </p>
            <a class="slide-button"></a>
        </label>

在我的初始帖子中，我将click事件绑定到标签本身，可能是因为bootstrap和Symfony，它被设计为聚焦点击时与其配对的字段。因此，只需将“swichBtn”类添加到两个跨度并将其用作单击事件活页夹元素，代码现在可以正常工作。感谢大家对此的投入！

jQuery在click事件上执行两个条件

4 个答案: