Question

我的网站有一个“容器”div，它是浏览器窗口宽度的200％，并且隐藏了溢出。一些信息在容器的左半部分（前100％），一些信息在右半部分（第二个100％）。我使用一个简单的图标切换来在容器的两半之间来回滑动，如下所示：

$('.container').animate({'marginLeft':'-=100%'}, 'slow');

- 或 -

$('.container').animate({'marginLeft':'+=100%'}, 'slow');

问题是，我需要根据容器的marginLeft执行某些事件。

当前半部分可见时，我对获得我想要的事件没有任何问题。但是当jquery将容器向左滑动100％时，使下半部分可见，我无法正常工作。

经过多个小时的研究后，我了解到我无法使用

if ($('.container').css('marginLeft') == '-100%') {
    //do something here

因为警报从不告诉我marginLeft为百分比，它总是以精确的像素返回数字。

我的结论是我需要在“if”语句中进行简单的计算，但我不知道如何编写一个。

用书面英文写道：

“如果以像素为单位的marginLeft除以窗口宽度（以像素为单位）等于-1，那么请做点什么......”

有人可以告诉我如何创建这个非常基本的jquery计算并将其应用于if语句吗？

非常感谢任何协助。

非常感谢和新年快乐，大卫。

Answer 1

我相信一个简单的方法（无需计算）是让变量告诉你天气与否，你是第二部分。我在JSFiddle上做了一个小例子，您可以在这里查看：http://jsfiddle.net/lrojas94/3udk9aj9/

基本理念是这样的：

var click = 1;
$(document).ready(function(){

    $('.percent').click(function(){
        if(click === 1)
        {
            $(this).css('marginLeft','-100%');
            click  =  2;
        }
        else{
            $(this).css('marginLeft','0');
            click = 1;
        }

    })

});

其中Percent类是Div，其大小为200％。检查小提琴以了解更多信息。

我必须指出，据说全局变量（大部分时间）都是个坏主意。但我相信这是一种简单易用的方法，您可以随意使用。希望这能回答你的问题，如果没有，希望我也可以从中学习。

Answer 2

它的长短不一，第一个面板显示大型投资组合图像，第二个面板显示缩略图网格 - 它们通过点击页脚中的图库图标来回切换。 Barmar先生（我上面的第一个回复者）带领我走开了一个保证金切换的道路（谢谢，先生！），无论容器div实际上在哪里，它都只返回“0”，支持绝对定位。这样做我实际上开始接收可用的定位数字，但我仍然面临将这些数字转换为可预测的数字的问题，所以我可以在if语句中使用它们。所以我所做的是创建一个变量，在本例中为“panelIndex”，这是将容器的左侧位置除以浏览器窗口宽度的结果。如果该数字是“0”我知道第一个面板是可见的，如果该数字是“-1”我知道第一个面板已经从屏幕向左滑动，现在第二个面板是可见的。等，像这样：

// GALLERY TOGGLE
$(document).ready(function() {
    $('#gallery_icon').click(function() {

    panelIndex = $('.container').position().left / $( window ).width();

    if ($(this).hasClass('off') && panelIndex == 0)
    {
        $(this).switchClass('off', 'on', 0);
        $('.container').animate({'left':'-100%'}, 'slow');
        // DO SOMETHING
    }
    else ($(this).hasClass('on') && panelIndex == -1)
    {
        $(this).switchClass('on', 'off', 0);
        $('.container').animate({'left':'0'}, 'slow');
        // DO SOMETHING ELSE
    }
    });
});

所以，是的...如果你像我一样工作百分比，你总是可以使用类似上面的简单等式来为你的条件语句生成可预测的结果。

谢谢Barmar＆amp; Niet the Dark Absol求助。

简单的jquery计算

2 个答案: