如何在Javascript中将大量变量传递给函数

Question

How can I pass many variables to a javascript function? I would like to simplify my code. It is much too long if I have to write an extra function for each variable. Any help will be appreciated. Thank You.

jQuery(document).ready(function ($) {

$('#item1').click(function () {
    $('html, body').animate({
        scrollTop: $("#div1").offset().top
    }, 2000, function () {
        revapi8.revcallslidewithid('item-11');;
    });
});

$('#item2').click(function () {
    $('html, body').animate({
        scrollTop: $("#div2").offset().top
    }, 2000, function () {
        revapi8.revcallslidewithid('item-12');;
    });
});

$('#item3').click(function () {
    $('html, body').animate({
        scrollTop: $("#div3").offset().top
    }, 2000, function () {
        revapi8.revcallslidewithid('item-13');;
    });
});
});

Answer 1

If your elements are as provided in question. This approach will work for you.

jQuery(document).ready(function($) {
  var arr = [1,2,3]; //element iterator
  arr.forEach(function(item){
    $('#item' + item).click(function() {
      $('html, body').animate({
        scrollTop: $("#div" + item).offset().top
      }, 2000, function() {
        revapi8.revcallslidewithid('item-1' + item);;
      });
    });
  })
});

Answer 2

You can use data-* prefix cutsom attribute to persists arbitary data with element which can be accessed using .data() or Element.dataset property.

Assign a CSS class ie item then use Class Selector (".class") to bind event handler

HTML

<div class='item' data-related-div="#div1" data-related-item="item-11">item 1</div>
<div class='item' data-related-div="#div2" data-related-item="item-12">item 2</div>
<div class='item' data-related-div="#div3" data-related-item="item-13">item 3</div>

Script

$('.item').click(function () {
    var div =  $(this).data('relatedDiv');//this.dataset.relatedDiv
    var item =  $(this).data('relatedItem');//this.dataset.relatedItem
    $('html, body').animate({
        scrollTop: $(div).offset().top
    }, 2000, function () {
        revapi8.revcallslidewithid(item);;
    });
});

Answer 3

You could simple use the jQuery index() method to get the clicked elements index and use the get() method to get the corresponding div element. This will of course only work if the amount of clickable elements is equal to the div elements you want to scroll to.

Here is an example.

 var $body = $('html, body'); var $itemsWrap = $('#items-wrap'); var $items = $itemsWrap.find('.item'); var $divs = $('[id^="div"]'); $itemsWrap.on( 'click', function(evt) { var index = $items.index( evt.target ); $body.animate({ scrollTop: $($divs.get(index)).offset().top }, 666); }); 

 html, body { min-height: 100%; margin: 0; } div[id^="div"] { height: 100vh; background: tomato; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="items-wrap"> <button class="item">item-1</button> <button class="item">item-2</button> <button class="item">item-3</button> </div> <div id="div1"><h1>Div 1</h1></div> <div id="div2"><h1>Div 2</h1></div> <div id="div3"><h1>Div 3</h1></div>