jquery - 使用 jQuery 时防止翻转

Question

很难给它一个好的短标题，所以这里有详细信息：

我正在努力做到这一点，以便当我单击一个 div 时，它会翻转以显示“背面”。我在下面查看了一个类似的问题（链接），它工作得很好，但我想做到这一点，以便当我在背面有一些东西要与之交互（即链接）时，它不会翻转到前面再次单击它时。此外，我希望它在用户单击该翻转 div 之外的任何位置时翻转，而不是在单击时翻转回前面。有什么建议么？谢谢。

另外，这会影响页面加载吗？有没有更快的解决方案？

我 点击 jquery-function-to-flip-an-image-on-click

Answer 1

这是你想要的吗？ http://jsfiddle.net/balintbako/AMNKL/（点击蓝框顶部和底部）

JS

$("body").click(function () {
    $(".someclass").removeClass("flipped");

});

$(".someclass").click(function () {
    flip($(this));
    return false;
});

function flip(item) {
    if (!item.hasClass("flipped")) {
        $(".someclass").removeClass("flipped");
        item.addClass("flipped");
    }
}

Answer 2

不知道我的问题是否正确，但我假设您只希望卡片在您的卡片中没有链接的情况下翻转。如果您已经知道卡片的背面是否有链接，您可以放置​​一个类“hasLink”来告诉您的应用程序不要将卡片翻转回来。

$('.f1_container').click(function() {
    var $this = $(this),
        isActive = $this.hasClass('active'),
        hasLink = $this.hasClass('hasLink'),
        checkLink = function () {
            return ($this.find('.backSideOfCard').find(a).length >= 0)
        };

    if(isActive && !hasLink)
    {
        $('.active').not('.hasLink').removeClass('active');
        //Add this check only if you add your links dynamically  
        if(checklink()) {
           $this.addClass('hasLink');
        }
        return false;
    }
    if(!isActive)
   {
        $this.addClass('active');
   }

});

最后，如果您只想通过单击翻转的卡片外部（如果它有链接）来翻转卡片，您可以执行以下操作

$(body).on('click', '.f1_container:not(.hasLink)', function(){
   $('.hasLink').removeClass('active');
});

类名可能不正确；但我希望你可以通过对这段代码进行一些调整来达到你想要的应用程序行为；甚至更好地掌握如何对课程进行检查。阿吉奥斯！