Javascript jQuery在单击事件时执行这两个条件

我在我的一个页面上有一个来自这个网站的切换开关，我试图让它隐藏并显示一个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消息，这告诉我脚本正在完整地执行，而不仅仅是一个或其他选项

另外，我知道在jQuery中使用toggle（）命令效率更高，但这就是现在用于故障排除的代码

---

有什么想法吗？

改变你的状况：

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

致：

好吧，试试这个

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

---

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

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

---

好了，伙计们，我终于解决了。切换本身的代码如下所示：

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

您必须有其他JS与之冲突。这把小提琴拉得很好，它被捆了两次。弄清楚为什么它被绑定两次，你就会得到答案。考虑到您提供的内容，我们无法为您解决这个问题。此外，您所指的“jQuery中的toggle（）命令”在当前版本的jQuery中实际上已经不存在了，因此您的操作方式是首选的（主要是）。您可以将代码的处理程序部分缩减为一行：

$（“#s2id_title-search，#s2id_author-search”）。toggle（）

而不是if语句。我得到的结果相同。@TuxMeister，您确定。。。我在运行代码，div是交替的。一定要复制我写的代码。@TuxMeister，它在FireBug控制台中的记录也非常好。所以再次复制我写的代码。@TuxMeister，嗯。。。。你可以发布与你试图隐藏的div有关的HTML吗？复制的方式完全相同，结果仍然相同。我开始发疯了，lolIt对你的提案执行了第3步和第4步两次。不，这是该ID在项目中的唯一事件。这很奇怪。作为一种双重检查的方法，这将告诉您哪些事件与元素关联：

$。\u data（$（“#searchSwitch_btn”）[0]，“events”）。否则，我不确定是什么导致所有console.log事件打印。如何查看事件属性？这没有解释，我在另一页上也看到过，我无法在Chrome的inspector中找到这些信息。是描述如何查找绑定到元素的jQuery事件的另一个答案。基本上，在Chrome开发者工具控制台选项卡中运行以下命令并展开输出的对象：
$（“#searchSwitch_btn”）[0]，“events”）。在Chrome中，您可以右键单击事件的处理程序函数，然后单击“查看函数定义”跳转到定义该函数的位置。太棒了，这很管用，但不幸没有帮助。我看到三个对象：一次单击事件、一次鼠标悬停事件和一次鼠标悬停事件，没有我们预期的重复单击事件。
       <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>