Javascriptの関数に多くの変数を渡す方法

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()またはElement.datasetプロパティを使用してアクセスすることができる要素を持つarbitaryデータを永続化するためにdata-*プレフィックスcutsom属性を使用することができます。

あなたはjQueryのindex()方法に簡単な使用をできた後、イベントハンドラをバインドする

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> 

スクリプトClass Selector (".class")を使用

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

CSSクラスすなわちitemを割り当てクリックされた要素を取得する対応するdiv要素を取得するには、get()メソッドを使用します。これはもちろん、クリック可能な要素の量がスクロールしたい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>