jQuery if语句导致浏览器崩溃

jQuery if statement causes browser to crash

本文关键字：浏览器 崩溃 if 语句 jQuery      更新时间：2023-09-26

我有一个小脚本，如果按下相应的按钮，应该显示隐藏的div。例如，如果单击了按钮first-button，则应该显示div first-button-content。现在，当我点击按钮，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>

脚本如下:

jQuery(document).ready(function() {
    jQuery(".home-middle-buttons div").click(function() {
        if (jQuery(".first-button").click()) {
            jQuery(".first-button-content").css( 'display', 'block' );
        } else {
            jQuery(".second-button-content").css( 'display', 'block' );
        }
    });
});

你的问题是这一行:

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

调用.click()实际上触发单击事件，它不测试是否发生了单击。然后它会调用点击处理程序，点击到那一行触发点击，点击调用处理程序，等等

试试这个:

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

在点击处理程序中，this指的是被点击的特定按钮，而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>

使用这个JS:

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

演示:http://jsfiddle.net/uHzTB/

注意:如果data-associated-content看起来有点长，可以随意使用data-something-shorter。此外，你的内容div上的类似乎唯一地识别这些div，所以我建议更合乎逻辑的是使它们成为id而不是class。

因为你有一种递归函数调用，这一行有问题:

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

它调用这个:

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

，这个再次调用第一个，所以它是递归的

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

现在，这不是你获得被点击元素的方式。相反，它是.trigger("click")的一个快捷方式——你基本上是通过一次又一次地触发事件处理程序来创建一个无限循环。

相反，您想测试当前元素this是否为第一个按钮:

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

您不妨使用hasClass方法

相关文章：