首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >点击Jquery removeClass()

点击Jquery removeClass()
EN

Stack Overflow用户
提问于 2014-05-18 13:16:47
回答 2查看 95关注 0票数 1

嗨,我有这个问题:我想点击div,它会翻转(这是工作),但是下一步是flipped,点击"x“(这是我的问题)。

HTML代码:

代码语言:javascript
运行
复制
<div class="col-md-4">
    <div class="balik">
        <div class="panel panel-default panel-cube">
            <div class=" flip">
                <div class="card">
                    <div class="panel-body face front">
                        <h4>Balík 28 dní</h4>
                        <br>
                        <h1>16,80€</h1>
                        <br>
                        <h4>Zisti viac o balíku &raquo;</h4>
                    </div>
                    <div class="panel-body face back">
                        <p class="close">x</p>  <a href="#"><h4>O Balíku 28 dní</h4></a>
                        &raquo; celkom 28 dní na topovanie
                        <br />&raquo; 5 topovaných inzerátov
                        <br />&raquo; -30% z ceny oproti balíku 7 dní
                        <br />
                        <br>
                        <button class="btn btn-success"><i class="fa fa-shopping-cart"></i> Kúpiť</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JQUERY代码:

代码语言:javascript
运行
复制
$(function(){
$('.flip').click(function(){
    $(this).find('.card').addClass('flipped')
    });// this is work

$('.close').click(function(){
        $('.flip').find('.card.flipped').removeClass('flipped')
    }); // this is not work
});

谢谢你的回答。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-05-18 13:23:13

由于.flipped本质上是一个动态创建的元素,因此需要使用事件委托:

http://jsfiddle.net/isherwood/7Zg92/

代码语言:javascript
运行
复制
$(document).on('click', '.close', function () {
    $('.flip').find('.card.flipped').removeClass('flipped')
});
票数 2
EN

Stack Overflow用户

发布于 2014-05-18 13:31:18

这是因为事件冒泡,您应该停止事件的传播:

代码语言:javascript
运行
复制
$('.close').click(function(event) {
    event.stopPropagation();
    $('.flip').find('.card.flipped').removeClass('flipped');
});

http://jsfiddle.net/aaLUs/

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23722335

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档