Question

如何将许多变量传递给javascript函数？我想简化我的代码。如果我必须为每个变量写一个额外的函数，那就太长了。任何帮助将不胜感激。谢谢。

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

如果您的元素是有问题的。这种方法对你有用。

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

您可以使用data-*前缀cutom属性来保存使用.data()或Element.dataset属性可以访问的元素的任意数据。

分配CSS类，即item，然后使用Class Selector (".class")绑定事件处理程序

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>

脚本

$('.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

您可以简单地使用jQuery index()方法获取单击的元素索引，并使用get()方法获取相应的div元素。这当然只有在可点击元素的数量等于您想要滚动到的div元素时才有效。

这是一个例子。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: