我正在尝试创建3个带有共享文本区域的简单按钮。单击每个按钮时,共享文本区域中将显示不同的消息。我设法在Codepen here中完成了此任务。但是,当我尝试将其实现到我的项目中时,它的行为就大不相同了。这些按钮不再根据所按下的按钮交换文本,并且不再正确跟踪各个索引。我的猜测是因为它们深深地嵌套在其他div中?不确定。基本上,当您单击图像图标之一时,将显示上面的相应文本。提前非常感谢您的帮助。这是我的代码
$('.benefit-button').first().addClass('active');
$('.benefit-button').on('click', function(){
var $this = $(this);
$siblings = $this.parent().children(),
position = $siblings.index($this);
console.log (position);
$('#blah div').removeClass('active').eq(position).addClass('active');
$siblings.removeClass('active');
$this.addClass('active');
})
div[class*="content-"] {
display: none;
}
div.active {
display: block;
}
<div class="row lt-blue-bg">
<div class="large-12 large-centered columns benefit-section">
<span class="small-11 small-centered large-7 columns info" id="benefit">
<div class="accordionWrapper">
<div id="blah">
<div class="content-1"><h2>Happy</h2></div>
<div class="content-2"><h2>Healthy</h2></div>
<div class="content-3"><h2>Money</h2></div>
</div>
<div class="accordionItem close">
<p class="accordionItemHeading">Sources<br>+</p>
<div class="accordionItemContent">
<p style="color: black;">Yes, the Tobacco Quitline is completely FREE!</p>
</div>
</div>
</div>
</span>
<span class="small-12 large-3 columns benefit-icons">
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/rainbowicon.png" class="circle rainbow"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/hearticon.png" class="circle heart"></a>
</span>
<span>
<a class="benefit-button"><img src="<?php echo get_template_directory_uri(); ?>/images/moneyicon.png" class="circle money"></a>
</span>
</span>
</div>
</div>
最佳答案
<span>
周围的多余<a>
与
$siblings = $this.parent().children(),
该行中还有一个语法错误:
,
而不是;
。你需要
$siblings = $this.parent().parent().children();
从(= this)到父级(span)到父级(span上方)。
关于javascript - 按钮单击事件未在深度嵌套的div中触发,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53366521/