我正在尝试创建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/

10-12 12:39
查看更多