2

我有一组图像，我试图根据用户窗口的位置激活（更改不透明度）。下面的代码有效，但只能通过一长串 if else 语句。有没有办法缩短下面的代码？

//Function to activate and deactivate the buttons on the side menu
function navIndicator() {
    var winNow = $(window).scrollTop();
    var posRoi = $('#roi').offset();
    var posRoiNow = posRoi.top;
    //Activate the propper button corresponding to what section the user is viewing
    if (winNow == posRoiNow * 0) {
        $('#homeBut a img.active').stop().animate({
            opacity: 1
        } {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#homeBut').addClass("viewing")
    } else {
        $('#homeBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#homeBut').removeClass("viewing")
    }
    if (winNow == posRoiNow) {
        $('#roiBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#roiBut').addClass("viewing")
    } else {
        $('#roiBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#roiBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 2) {
        $('#dmsBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#dmsBut').addClass("viewing")
    } else {
        $('#dmsBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#dmsBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 3) {
        $('#techBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#techBut').addClass("viewing")
    } else {
        $('#techBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#techBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 4) {
        $('#impBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#impBut').addClass("viewing")
    } else {
        $('#impBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#impBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 5) {
        $('#virBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#virBut').addClass("viewing")
    } else {
        $('#virBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#virBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 6) {
        $('#biBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#biBut').addClass("viewing")
    } else {
        $('#biBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#biBut').removeClass("viewing")
    }
    if (winNow == posRoiNow * 7) {
        $('#contBut a img.active').stop().animate({
            opacity: 1
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#contBut').addClass("viewing")
    } else {
        $('#contBut a img.active').stop().animate({
            opacity: 0
        }, {
            queue: false,
            duration: 300,
            easing: "easeOutExpo"
        });
        $('#contBut').removeClass("viewing")
    }
};
4

2 回答 2

3

除了选择器之外，所有代码似乎都相同。制作了一个要迭代的对象，因此请注意重复性任务。您可以使用toggleClass通过布尔值添加或删除类。我还认为您的示例在animate语法中缺少逗号。

//Function to activate and deactivate the buttons on the side menu
function navIndicator(){
    var winNow = $(window).scrollTop(),
        posRoi = $('#roi').offset(),
        posRoiNow = posRoi.top,
        // Didn't copy paste all of the buttons here, but you get it ;)
        check = [ $('#homeBut'), $('#roiBut') ];

    $.each( check, function( multiplier, btn ) {

      var match = (winNow == posRoiNow * multiplier ),
          opacity = ( match ) ? 1 : 0;

      btn.find( 'a img.active' )
      .stop()
      .animate({opacity:opacity},{queue:false,duration:300,easing:"easeOutExpo"});

      btn.toggleClass( 'viewing', match );

    });

}
于 2013-08-28T02:21:56.013 回答
2

我也有同样的问题，我需要相同“类型”的 else 语句并且不能（或不想）使用变量系统，因为我获取的信息来自 .getJSON 语句。

我实际上要做的只是不放在 ELSE 语句中，而只是根据被抓取的信息重复出现 IF 语句。（这与您使用的代码不同，因为我对此仍然很陌生，但这似乎是重复 if 语句的最简单方法，因为假设 else 。）

    var $j = jQuery.noConflict();
    var KBOXUSER = '';
    $j(document) .ready(function () {
        //Get logged in User
        KBOXUSER = $j('*:contains("User: "):last') .text();
        var n1 = KBOXUSER.indexOf('User: ') + 6;
        var n2 = KBOXUSER.indexOf('Organization:');
        KBOXUSER = KBOXUSER.substring(n1, n2);
        $j.getJSON('/common/jkuery.php?id=104&query_type=sqlp&p1=' + KBOXUSER + '', function (data) {
    $j.each(data.json, function(key, val) {
        if (val == 'CSR' || val == 'Executive') {
        $j('select[name=QUEUE_ID] option:[title="Service Desk - A/P"]') .remove();
        };
        if(val == 'Accounting') {
        $j('select[name=QUEUE_ID] option:[title="Service Desk - CSR"]') .remove();
        };
        if(val == 'Embroidery') {
        $j('select[name=QUEUE_ID] option:[title="Service Desk - CSR"]') .remove();
        $j('select[name=QUEUE_ID] option:[title="Service Desk - A/R"]') .remove();
        };
     });

  });
});
于 2014-06-11T15:21:04.510 回答