jQuery if语句导致浏览器崩溃

我有一个小脚本，如果按下相应的按钮应该显示一个隐藏的div。例如，如果单击按钮的第一个按钮比第一个按钮内容应显示的div更小。现在，当我点击按钮时，chrome崩溃，div不显示。jQuery if语句导致浏览器崩溃

下面是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'); 
     } 
    }); 
});

来源

2013-05-19 user715564

只有Chrome崩溃？ 0_0 – Cherniv

Firefox不会崩溃。它在控制台中显示“太多递归”。 – acdcjunior

你的问题是，这条线是递归的：

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

调用.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更合乎逻辑。

来源

2013-05-19 01:57:42 nnnnnn

壮观。谢谢您的帮助。我会尽快接受你的回答。我不能再等八分钟。 – user715564

'jQuery（this）.data（“associated-content”）;'会工作一样，不是吗？ – acdcjunior

@acdcjunior - 取决于你对“更好”的定义。我倾向于不使用'.data（）'来检索属性值，因为（尽管在这种情况下它并不重要）它会尝试执行数据类型转换，而且我更愿意清除我使用的值是从元素属性而不是之前用'.data（）'设置的值。 – nnnnnn

因为你有一种递归函数调用，这条线是有问题的：

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

它打电话给：

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

，这就要求第一了，所以

来源

2013-05-19 01:57:34 Cherniv

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

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

相反，你要测试的当前元素 - this - 无论is第一个按钮：

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

你还不如使用hasClass method。

来源

2013-05-19 01:59:26 Bergi

jQuery if语句导致浏览器崩溃

回答

相关问题