複数のjavascriptを1つの関数に結合する

Question

私はjsについて全く何も知っていませんが、私はこれを偶然見つけて、私はおそらくそれらの約30を持って終わるでしょう。 30のすべての瓶を組み合わせることは可能ですか？各customPushは新しいHTMLをプッシュします。

ありがとうございます。

var customPush1 = function (event) { 
myNavigator.pushPage('pageNav2.html', { data: { cardTitle: 
event.target.textContent } }) 
}; 
var customPush2 = function (event) { 
myNavigator.pushPage('pageNav3.html', { data: { cardTitle: event.target.textContent } }) 
}; 

Answer 1

はい。計画では30個のボタンにそれぞれ別々のHTMLをロードすることです

この場合、多くの機能を作成するのではなく、ボタンにいくつかのデータ属性を追加します。委任されたイベントを使用する。

しかし、機能間でコードを共有できるようにしたい場合は、関数を返す関数を作成し、クロージャを使用してパラメータを渡すことができます。以下は例です。

function makePush(url) { 
 
    return function (event) { 
 
    myNavigator.pushPage(url, { data: { cardTitle: 
 
     event.target.textContent } }) 
 
    } 
 
} 
 

 
var 
 
    customPush1 = makePush('pageNav2.html'), 
 
    customPush2 = makePush('pageNav3.html');

そして、ここではボタンの委任イベントを使用した例です。 jQueryを使用するのは簡単で簡単ですが、jQueryを使用しなくても同じことができます。

$('body').on('click', '[data-custom-push]', function() { 
 
    var page = $(this).attr('data-custom-push'); 
 
    alert('Page = ' + page); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button data-custom-push="pageNav1.html">Button 1</button> <br> 
 
<button data-custom-push="pageNav2.html">Button 2</button> <br> 
 
<button data-custom-push="pageNav3.html">Button 3</button> <br> 
 
<button data-custom-push="pageNav4.html">Button 4</button> <br> 
 
<button data-custom-push="pageNav5.html">Button 5</button> <br> 
 
<button data-custom-push="xyz.html">Button 6</button> <br> 
 
<button data-custom-push="abc.html">Button 7</button> <br>