简单的jquery计算

Question

我有一个站点，其"容器"div是浏览器窗口宽度的200%，并且溢出是隐藏的。 一些信息在容器的左半部分（前 100%），一些信息在右半部分（第二个 100%）。 我使用一个简单的图标切换在容器的两半之间来回滑动， 这样：

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

--

或 --

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

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

当前半部分可见时，我无法获得我想要的事件。 但是当 jquery 将容器向左滑动 100% 时，使后半部分可见，我无法进行任何工作。

经过许多小时的研究，我了解到我不能使用

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

因为警报永远不会以百分比形式告诉我 marginLeft，所以它总是以精确像素为单位返回数字。

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

在书面英语中，它将是：

"如果以像素为单位的边距左除以以像素为单位的窗口宽度等于 -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;
        }
    })
});

其中百分比类是大小为 200% 百分比的 Div。检查小提琴以了解更多信息。

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

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 & Niet the Dark Absol的帮助。