使用CSS/Javascript通过单击不同的按钮翻转多个div

我对Javascript真的很陌生。我已经玩了一段时间了，通过使用教程和其他一些帮助，我成功地让一个页面上的多个div单独翻转。现在，我想看看是否可以使用按钮或超链接来翻转这些相同的div

我原以为它会像将控制翻转的类移动到按钮一样简单，但事实似乎并非如此。我已经读到，我需要调整我的Javascript，使其能够从传递的id开始工作

问题是，我不知道怎么做。我曾尝试在单击时将按钮id传递给Javascript函数（比如：

单击我

），但这不起作用。我可能离基地太远了

我的小提琴是。我离开了第三个部门，和以前一样，工作着，只是为了向你们展示我的起点

任何帮助都将不胜感激

HTML:

Javascript:

function flipThis() {
    var $this = $(this);
    var card = $this.find('.flipcard');
    var front = $this.find('.flipcard-front');
    var back = $this.find('.flipcard-back');
    var tallerHight = Math.max(front.height(), back.height()) + 'px';
    var visible = front.hasClass('ms-front-flipped') ? back : front;
    var invisible = front.hasClass('ms-front-flipped') ? front : back;
    var hasTransitioned = false;
    var onTransitionEnded = function () {
        hasTransitioned = true;
        card.css({
            'min-height': '0px'
        });
        visible.css({
            display: 'none',
        });
        // setting focus is important for keyboard users who might otherwise
        // interact with the back of the card once it is flipped.
        invisible.css({
            position: 'relative',
            display: 'inline-block',
        }).find('button:first-child,a:first-child').focus();
    }

    // this is bootstrap support, but you can listen to the browser-specific
    // events directly as well
    card.one($.support.transition.end, onTransitionEnded);

    // for browsers that do not support transitions, like IE9
    setTimeout(function () {
        if (!hasTransitioned) {
            onTransitionEnded.apply();
        }
    }, 2000);

    invisible.css({
        position: 'absolute',
        display: 'inline-block'
    });

    card.css('min-height', tallerHight);
    // the IE way: flip each face of the card
    front.toggleClass('ms-front-flipped');
    back.toggleClass('ms-back-flipped');
    // the webkit/FF way: flip the card
    card.toggleClass('card-flipped');
}

$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);

干杯！

---

（编辑以显示代码）

我创建了一个修改过的函数flipThis，并从html中删除了onclick操作

正如我在评论中所写，您必须认识到您当前在DOM中的位置。我想代码是不言自明的。我还为flipThis函数添加了一个参数，这样我们就可以更准确地知道我们在使用什么。（不是真的需要，我们仍然可以使用$（这个）但这是我做事的方式

if($(e.currentTarget).prop('tagName')=="BUTTON")
    $this = $(this).closest('.sm_box');
else
    $this = $(this);

---

请在堆栈溢出上发布代码，而不仅仅是指向小提琴的链接。因此，正如我看到的代码，您需要修改函数flipThis，因为它总是将整个div作为元素，在其中查找子元素。您需要检查单击的内容，如果是按钮，则必须将$this设置为$（this）。parent（）。parent（）；就是这样。或者$（this）。最接近（“.sm_box”）；如果可能的话，你可以使用这个链接。答案对你没有帮助吗？谢谢，@jPO，这肯定有帮助。Javascript中的整个

$this

代码真的让我困惑。我必须进一步阅读。

function flipThis() {
    var $this = $(this);
    var card = $this.find('.flipcard');
    var front = $this.find('.flipcard-front');
    var back = $this.find('.flipcard-back');
    var tallerHight = Math.max(front.height(), back.height()) + 'px';
    var visible = front.hasClass('ms-front-flipped') ? back : front;
    var invisible = front.hasClass('ms-front-flipped') ? front : back;
    var hasTransitioned = false;
    var onTransitionEnded = function () {
        hasTransitioned = true;
        card.css({
            'min-height': '0px'
        });
        visible.css({
            display: 'none',
        });
        // setting focus is important for keyboard users who might otherwise
        // interact with the back of the card once it is flipped.
        invisible.css({
            position: 'relative',
            display: 'inline-block',
        }).find('button:first-child,a:first-child').focus();
    }

    // this is bootstrap support, but you can listen to the browser-specific
    // events directly as well
    card.one($.support.transition.end, onTransitionEnded);

    // for browsers that do not support transitions, like IE9
    setTimeout(function () {
        if (!hasTransitioned) {
            onTransitionEnded.apply();
        }
    }, 2000);

    invisible.css({
        position: 'absolute',
        display: 'inline-block'
    });

    card.css('min-height', tallerHight);
    // the IE way: flip each face of the card
    front.toggleClass('ms-front-flipped');
    back.toggleClass('ms-back-flipped');
    // the webkit/FF way: flip the card
    card.toggleClass('card-flipped');
}

$('button.flip-it').click(flipThis);
$('div.flip-it').click(flipThis);

if($(e.currentTarget).prop('tagName')=="BUTTON")
    $this = $(this).closest('.sm_box');
else
    $this = $(this);