我有一个小脚本,如果按下相应的按钮,应显示隐藏的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' );
}
});
});
解决方法
你的问题是这一行：
if (jQuery(".first-button").click()) {
调用.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>
有了这个JS：
jQuery(document).ready(function() {
jQuery(".home-middle-buttons div").click(function() {
var associatedDiv = jQuery(this).attr("data-associated-content");
jQuery("." + associatedDiv).show();
});
});
注意：如果数据相关内容似乎有点长时间使用数据 – 更短的东西.此外,您的内容div上的类似乎唯一地标识这些div,所以我建议将它们设为id而不是类更合乎逻辑.
