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

Question

I'm trying to create 3 simple buttons w/ a shared text area. Each button will display a different message in the shared text area when clicked. I have managed to accomplish this in a codepen here. However, when I tried to implement this into my project, it behaved much differently. The buttons no longer swapped text depending on which button was pressed, and the individual indexes are no longer being correctly tracked. My guess is that its because they're deeply nested within other divs? Not sure. Basically, when you click on one of the image icons, the corresponding text above would show. Thanks so much in advance for any help. Here is my code

    $('.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>

</div>

Answer 1

It's the extra <span> around the <a> that doesn't correspondend with

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

there's also a syntax error in that line: , instead of ;.

You need

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

to get from a (=this) to parent (span) to parent (span above).