Question

我有以下HTML代码

<div class="testimonial closed">

    <p class="author">Author name</p>

    <p class="quote">This is a quote</p>

</div>

我有以下jquery代码：

jQuery(document).ready(function($){ 

    if ($('.testimonial').hasClass('closed')) {

        $("p.author").click(function() {

            var parent = $(this).parent();
            window.console.log("Opened with author name");
            $(parent).addClass("opened").removeClass("closed");

        });

    } else if ($('.testimonial').hasClass('opened')) {

        $("p.author").click(function() {

            var parent = $(this).parent();
            window.console.log("Closed with author name");
            $(parent).addClass("closed").removeClass("opened");

        });

    }

});

我的问题是代码的第二部分永远不会被执行。

我在控制台中添加了一些输出，可以看到代码的第二部分永远不会被执行，因为我总是会显示消息“用作者姓名打开”，无论我多少次点击该类的段落作者。

为什么会发生这种情况的任何想法？

是否因为第一次点击时应用的新类'open'在'else if'语句中以某种方式不可用？如果没有，那么如何让它识别出班级已经从“关闭”变为“打开”？

感谢您的时间和帮助。

Answer 1

问题是因为您只在加载时运行代码，因此永远不会应用click()元素的.opened处理程序。相反，使用单个click()处理程序并切换父元素上的类。试试这个：

$("p.author").click(function() {
    $(this).closest('.testimonial').toggleClass("opened closed");
});

Example fiddle

Answer 2

您告诉代码在页面加载时运行，并且html始终作为调用关闭。因此，第一个陈述始终是真的。它永远不会再次运行，所以永远不会达到另一个声明。将<div class="testimonial closed">更改为<div class="testimonial opened">，另一个将始终发生。您必须检查click事件中的条件。

我认为这会得到你想要的东西。

jQuery(document).ready(function($){ 
    $("p.author").click(function() {
        var parent = $(this).parent();
        $(parent).toggleClass("opened closed");
    });
});

Jquery代码只执行第一个语句

2 个答案: