jQuery if语句导致浏览器崩溃

Question

我有一个小脚本,如果按下相应的按钮,应显示隐藏的div.例如,如果单击按钮第一个按钮,则应显示div第一个按钮内容.现在,当我点击按钮时,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' );
        }
    });
});

Answer 1

你的问题是这一行:

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.

Answer 2

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

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

它叫这个:

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

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