Javascript jqueryif语句导致浏览器崩溃

我有一个小脚本，如果按下相应的按钮，它会显示一个隐藏的div。例如，如果单击按钮第一个按钮，则应显示div first按钮内容。现在，当我点击按钮时，chrome崩溃，div不显示

以下是html：

    <div class="home-middle-buttons">
        <div class="first-button">
            <span>I’m an In-House Marketer</span>
        </div>
        <div class="second-button">
            <span>I Work at an Agency</span>
        </div>
        <div class="third-button">
            <span>I’m a Business Owner</span>
        </div>
    </div>
    <div class="home-middle-content">
        <div class="first-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="second-button-content">
            <p>Lorem ipsum dolor</p>
        </div>

        <div class="third-button-content">
            <p>Lorem ipsum dolor.</p>
        </div>
    </div> 

---

因为您有一种递归函数调用，所以这一行有问题：

if (jQuery(".first-button").click()) {

它称之为：

jQuery(".home-middle-buttons div").click(function() {

---

这会再次调用第一个，因此它是递归的

您的问题是这行：

if (jQuery(".first-button").click()) {

调用

.click（）

实际上会触发一个单击事件，它不会测试是否发生了单击。然后依次调用你的点击处理程序，点击处理程序到达那一行并触发点击，点击处理程序调用处理程序，等等

试试这个：

if (jQuery(this).hasClass("first-button")) {

在单击处理程序中，

这个

引用了被单击的特定按钮，jQuery的

.hasClass（）

返回一个布尔值，用于判断元素是否具有该类

但是，一个更好的方法是如下：

<div class="home-middle-buttons">
    <div data-associated-content="first-button-content">
        <span>I’m an In-House Marketer</span>
    </div>
    <div data-associated-content="second-button-content">
        <span>I Work at an Agency</span>
    </div>
    <div data-associated-content="third-button-content">
        <span>I’m a Business Owner</span>
    </div>
</div>
<div class="home-middle-content">
    <!-- as in the question -->
</div> 

演示：

注意：如果

与数据相关的内容

似乎有点长，请随意使用

数据或更短的内容

。此外，内容div上的类似乎唯一地标识了这些div，因此我建议将它们设置为

id

，而不是

class

现在，这不是获得单击元素的方式。相反，它是一个快捷方式-您基本上是通过一次又一次地触发事件处理程序来创建一个无限循环

相反，您要测试当前元素--它是否位于第一个按钮上：

$(this).is(".first-button")

---

您最好只使用.

Chrome崩溃？0\u 0 Firefox不会崩溃。它在控制台中显示“太多递归”。太壮观了。谢谢你的帮助。我会尽快接受你的答复。我不能再等八分钟了。

jQuery（this.data）（“关联内容”）

也一样，不是吗？@acdcjunior-取决于你对“更好”的定义。我倾向于不使用

.data（）

来检索属性值，因为（尽管在本例中这并不重要）它尝试进行数据类型转换，而且我更喜欢明确我使用的值来自元素属性，而不是以前使用

.data（）

设置的值。

jQuery(document).ready(function() {
    jQuery(".home-middle-buttons div").click(function() {
        var associatedDiv = jQuery(this).attr("data-associated-content");
        jQuery("." + associatedDiv).show();
    });
});

jQuery(".first-button").click()

$(this).is(".first-button")