简单的jquery计算

Question

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

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

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

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

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

-- 或 --

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

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

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

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

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

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

当上半场可见时，我可以毫无问题地获得我想要的事件。但是当 jquery 将容器向左滑动 100%，使后半部分可见时，我什么也做不了。

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

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

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

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

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

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

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

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

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

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

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

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

书面英语是：

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

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

“如果以像素为单位的 marginLeft 除以以像素为单位的窗口宽度等于 -1 那么请做一些事情......”

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

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

谁能告诉我如何创建这个非常基本的 jquery 计算并将其应用于 if 语句？

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

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

如有任何帮助，我们将不胜感激。

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

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

非常感谢

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

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

    })

});

其中百分比 class 是大小为 200% 的 Div。查看 fiddle 以了解更多信息。

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

Answer 2

总而言之，第一个面板显示大型投资组合图像，第二个面板显示缩略图网格——它们通过单击页脚中的画廊图标来回切换。 Barmar 先生（我的第一个回复者，上面）引导我放弃了边距切换（谢谢，先生！）无论容器 div 实际在哪里，它都只返回“0”，赞成的绝对定位。在这样做的过程中，我实际上开始接收用于定位的可用数字，但我仍然面临将这些数字转换为可预测的东西的问题，因此我可以在 if 语句中使用它们。所以我所做的是创建一个变量，在本例中为 "panelIndex"，这是 div 将容器的左侧位置调整为浏览器宽度 window 的结果。如果那个数字是“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 的帮助。

简单的jquery计算

simple jquery calculation

jquery

if-statement

jquery-calculation