-1

我在我的一个页面上有一个来自这个网站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 消息都显示出来，这告诉我脚本正在完整执行，而不仅仅是一个或其他选项。

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

有任何想法吗？

4

4 回答 4

0

改变你的条件：

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

至：

    if($("#s2id_author-search").is(':visible')){
于 2013-08-26T17:35:54.790 回答
0

好吧，试试这个

$( "#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();
            }
        });
于 2013-08-26T17:37:33.083 回答
0

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

       <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”类添加到两个跨度并将其用作单击事件活页夹元素，代码现在就可以正常工作了。感谢大家对此的投入！

于 2013-08-26T21:53:31.170 回答
0

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

$( "#searchSwitch_btn" ).click(...)
于 2013-08-26T17:38:46.407 回答