Как я могу передать много переменных в функцию 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');;
    });
});
});
1
azrm 12 Янв 2017 в 10:57

3 ответа

Лучший ответ

Если ваши элементы, как указано в вопросе. Этот подход будет работать для вас.

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);;
      });
    });
  })
});
3
Jyothi Babu Araja 12 Янв 2017 в 08:02

Вы можете просто использовать метод jQuery index(), чтобы получить индекс выбранных элементов, и использовать метод get(), чтобы получить соответствующий элемент div. Это, конечно, будет работать, только если количество кликабельных элементов равно элементам div, на которые вы хотите перейти.

Вот пример.

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>
0
DavidDomain 12 Янв 2017 в 08:29

Вы можете использовать data-* префиксный атрибут cutsom для сохранения произвольных данных с элементом, доступ к которому можно получить с помощью {{X1 }} или Element.dataset имущество.

Назначьте класс CSS, т. Е. item, а затем используйте селектор классов (".class") привязать обработчик события

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

< EM> 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);;
    });
});
1
Satpal 12 Янв 2017 в 08:13