Question

您好我使用了一个非常棒的jquery插件http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/，但是当元素翻转时，我希望在翻转侧有一个按钮，用户可以点击该按钮并将其带到另一个页面。

麻烦的是，单击元素的另一面div会导致再次发生翻转。

如果用户点击了翻转元素中的div，我需要一些方法来阻止翻转

http://jsfiddle.net/hw7rP/2/

<div class="left bigbox sponsor">
    <div class="sponsorFlip">
        the front
    </div>

    <div class="sponsorData">
        <div class="ifIgetClickedDontFlip">click me</div>
    </div>
</div>

JS

$('.sponsorFlip').bind("click",function(){
    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
    var elem = $(this);
    // data('flipped') is a flag we set when we flip the element:
    if(elem.data('flipped'))
    {
        // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:
        elem.revertFlip();
        // Unsetting the flag:
        elem.data('flipped',false)
    }
    else
    { // Using the flip method defined by the plugin:
        elem.flip({
            direction:'lr',
            speed: 350,
            color: '#000',
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden
                // from view with display:none) into the clicked
                // .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.sponsorData').html());
            },
            onEnd: function(){
                //iniatiate ajax requests every second
            }
        });
        // Setting the flag:
        elem.data('flipped',true);
    }
});

任何人都可以帮助我吗？

Answer 1

翻转后如果要重定向到其他页面，当您再次单击页面或按钮时，可以执行此操作。

$('.sponsorFlip').bind("click",function(){
    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
    var elem = $(this);
    // data('flipped') is a flag we set when we flip the element:
    if(elem.data('flipped'))
    {
      // If the element has already been flipped

      // Write your code here to redirect it to some other page.

     }else{ // Using the flip method defined by the plugin:
           elem.flip({
           direction:'lr',
           speed: 350,
           color: '#000',
           onBefore: function(){
            // Insert the contents of the .sponsorData div (hidden
            // from view with display:none) into the clicked
            // .sponsorFlip div before the flipping animation starts:

                       elem.html(elem.siblings('.sponsorData').html());
                      },
              onEnd: function(){
            //iniatiate ajax requests every second
                     }
           });
        // Setting the flag:
        elem.data('flipped',true);
     }
});

在if(elem.data(flipped))内，您可以将代码重定向到您需要的页面。

Answer 2

我们可以检查点击的元素或其中任何一个父元素是否具有.doNotFlipMe类，如果这些元素中的任何一个评估为真，则不要翻转。 Simples！

HTML：

<div class="left bigbox sponsor">
    <div class="sponsorFlip">the front</div>
    <div class="sponsorData">
        <div>Some other content here
            <div class='doNotFlipMe'><a href="www.somesite.com">click me</a>
            </div>
        </div>
    </div>
</div>

使用Javascript：

$('.sponsorFlip').bind("click", function (e) {
        // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
        var elem = $(this);
        // data('flipped') is a flag we set when we flip the element:
        if (elem.data('flipped')) {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:
            targetEl = $(e.target);
            if (targetEl.hasClass('doNotFlipMe') || targetEl.parents('.doNotFlipMe').length) {
                // Do nothing
            } else {
                elem.revertFlip();
                // Unsetting the flag:
                elem.data('flipped', false);
            }
        }

演示：http://jsfiddle.net/robschmuecker/5EnfW/

jquery flippy - 阻止翻转发生

2 个答案: