dongtangu8615 2018-11-18 23:34
浏览 176
已采纳

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

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>
  • 写回答

1条回答 默认 最新

  • duanke0178 2018-11-19 00:31
    关注

    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).

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 请分析一下这个电路设计的优点🙏
  • ¥15 求视频摘要youtube和ovp数据集
  • ¥15 怎么改成输入一个要删除的数后现实剩余的数再输入一个删除的数再现实剩余的数用yes表示继续no结束程序
  • ¥15 在启动roslaunch时出现如下问题
  • ¥15 汇编语言实现加减法计算器的功能
  • ¥20 关于多单片机模块化的一些问题
  • ¥30 seata使用出现报错,其他服务找不到seata
  • ¥35 引用csv数据文件(4列1800行),通过高斯-赛德尔法拟合曲线,在选取(每五十点取1点)数据,求该数据点的曲率中心。
  • ¥20 程序只发送0X01,串口助手显示不正确,配置看了没有问题115200-8-1-no,如何解决?
  • ¥15 Google speech command 数据集获取