Question

我有一组图像，我试图根据用户窗口的位置激活（更改不透明度）。下面的代码有效，但只能通过一系列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")
    }
};

Answer 1

除选择器外，所有代码看起来都相同。制作一个迭代的对象，以便处理重复的任务。您可以使用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 );

    });

}

Answer 2

我也有同样的问题，我需要相同的＆＃39;类型＆＃39;因为我抓取的信息来自.getJSON语句，所以else语句并且不能（或者不想）使用Variable系统。

我实际上要做的就是不要放在ELSE语句中，只根据抓取的信息得到一个重复的IF语句。（它与您使用的代码不同，因为我仍然非常新，但这似乎是重复if语句的最简单方法，因为其他假设。）

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

  });
});

使用多个if else语句缩短代码

2 个答案: