3

如果按下相应的按钮，我有一个小脚本应该显示一个隐藏的 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' );
        }
    });
});
4

3 回答 3

6

你的问题是这一行：

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，因此我建议将它们设置为ida 而不是class.

于 2013-05-19T01:57:42.297 回答
5

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

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

它称之为：

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

这又调用了第一个，所以它是递归的

于 2013-05-19T01:57:34.737 回答
2 
jQuery(".first-button").click()

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

相反，你想测试当前元素——this它是否是第一个按钮：

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

你不妨使用hasClass方法。

于 2013-05-19T01:59:26.887 回答