Question

我是一个Javascript初学者，现在我有一些太复杂的东西让我无法解决。我将不得不编写这个代码块HUNDREDS的时间，唯一的区别在于这3个变量，这些变量会因每个代码重复而改变。

fkbtn01， reak00， buttonf01。

有没有办法解决这个问题？...谢谢。

JS：

//  START OF REPETITIVE CODING BLOCK
$(document).ready(function(){
    var distanza = $('.fkbtn01');

    $('.reak00').on('focus', function(){
    var posizione = $(this).val(); 
    distanza.css({left:posizione}).animate({
      'left': (posizione *100 / 200)
    });
  });

       $('.reak00').on('change', function(){
    var posizione = $(this).val(); 
    distanza.css({left:posizione}).animate({
      'left': (posizione *100 / 200)
    });
  }); 

     $('.reak00').on('focus', function(){
        r = $('#reak00').val().toString(16);
        var opacityRed = r / 100;        
        $("#buttonf01").css("background-color", "rgba(255,255,255," + opacityRed + ")");
        $("#buttonf01").css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")");

    });
  });
    $('.reak00').on('change', function(){
        r = $('#reak00').val().toString(16);
        var opacityRed = r / 100;        
        $("#buttonf01").css("background-color", "rgba(255,255,255," + opacityRed + ")");
        $("#buttonf01").css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")");

    });
//  END OF REPETITIVE CODING BLOCK

Fiddle

Answer 1

三件事：

您只需拨打一次.on即可暂停多个事件：
```
$('.reak00').on('focus change', ...
```
您可以在事件处理程序中执行多项操作
您可以通过将对象传递到.css

例如：

$(document).ready(function() {
    var distanza = $('.fkbtn01');

    $('.reak00').on('focus change', function() {
        //           ^^^^^^^^^^^^--------- two events
        // The first thing
        var posizione = $(this).val();
        distanza.css({
            left: posizione
        }).animate({
            'left': (posizione * 100 / 200)
        });

        // The second thing
        var r = $('#reak00').val().toString(16);
        var opacityRed = r / 100;
        $("#buttonf01").css({ // <==== Object for multiple styles
            "background-color": "rgba(255,255,255," + opacityRed + ")",
            "box-shadow": "0 0 25px rgba(255,127,50," + opacityRed + ")"
        });
    });
});

旁注：你的第二个change处理程序实际上在ready回调之外，但你的缩进是不正确的，所以这并不明显。我上面假设它与其他人在一起。

Answer 2

将所有代码分配到一个函数中：

    var assignHandlers = function(selectorOne, selectorTwo, selectorThree){
        return function(){

            var distanza = $(selectorOne);
            $(selectorTwo).on('focus change', function(){
                var posizione = $(this).val(); 
                distanza.css({left:posizione}).animate({
                  'left': (posizione *100 / 200)
                });
            });


            $(selectorTwo).on('focus change', function(){
                    r = $(selectorTwo).val().toString(16);
                    var opacityRed = r / 100;        
                    $( selectorThree ).css("background-color", "rgba(255,255,255," + opacityRed + ")");
                    $( selectorThree ).css("box-shadow", "0 0 25px rgba(255,127,50," + opacityRed + ")");

            });
        };
      };

然后根据需要多次使用'可变因子'：

    $(document).ready( assignHandlers('.fkbtn01', '.reak00', "#buttonf01") );
    $(document).ready( assignHandlers('.fkbtn02', '.reak00', "#buttonf01") );
    $(document).ready( assignHandlers('.fkbtn03', '.reak00', "#buttonf01") );
    $(document).ready( assignHandlers('.fkbtn04', '.reak00', "#buttonf01") );
    ....

如何减少重复的javascript函数？

2 个答案: