javascript - 按钮单击事件不会在深度嵌套的 div 中触发

Question

我正在尝试创建 3 个带有共享文本区域的简单按钮。单击时，每个按钮都会在共享文本区域中显示不同的消息。我已经设法在代码笔中完成了这个 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>

Answer 1

这是额外的<span> <a>周围不符合

$siblings = $this.parent().children(), 

该行中还有一个语法错误:,而不是 ; .

你需要

$siblings = $this.parent().parent().children();

从 (=this) 到父级 (span) 再到父级 (span above)。