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');
});

但是，班级名称可能不正确;但我希望你可以通过对这段代码进行一些调整来达到你想要的应用程序行为;甚至更好地掌握如何对课程进行检查。 Ajios！

使用jQuery时防止翻转

2 个答案: