3

ここで本当に基本的なもの。クリック関数に名前を付けて、いくつかのパラメーターを割り当てたいと思います。目標は、ユーザーがさまざまなデータを削除できるようにするなど、一般的なタスクに対して汎用関数を 1 つだけ記述できるように、コードを再利用できるようにすることです。

これが私の言いたいことを示すjsfiddleです。

そして、これがそのコードです：

HTML:

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>

そしてJS：

// this function would be loaded on my site's template and therefore would be available across my entire site.
function deleteThis(data_id){           
   $('button').on('click', 'button', function(){
      $('div[data-id="'+data_id+'"]').hide();  
   });
}  

var clicked_id=3;
function deleteThis(clicked_id); 
// this function would be called on the various pages where users can delete things and this variable, clicked_id, would be assigned=3 by the user's action on that page.

このボタン クリック イベントに名前を付けるにはどうすればよいですか?

更新ありがとう！またはボタンの親要素である$('button')必要があります。$(document.body)その単純な変更を加えれば機能します。Michael Buen が以下で提案しているように、それを行うこともできます。

4

6 に答える 6

2

コードをリファクタリングし、削除機能を独自の機能に配置するだけです

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
​

$('button').on('click', function() { deleteImmediately(3) });

function deleteImmediately(id) { -- refactored code
    $('div[data-id='+id+']').hide();  
}​

ライブテスト： http： //jsfiddle.net/e2kuj/2/

于 2012-04-20T00:44:33.060 に答える
1

ほぼ正解でした。更新しました - > http://jsfiddle.net/fz5ZT/41/

function deleteThis(id){
    $('button').click(function(){
        $('div[data-id="'+id+'"]').hide();  
    });    
};
deleteThis(3);​
于 2012-04-20T00:07:42.097 に答える
1

あなたのフィドラーで(function deleteThis(){})()は、それがプライベートになっており、グローバルとしてアクセスしようとしています!

于 2012-04-20T00:05:12.880 に答える
0

別の方法で要素を削除できます。

  $('button').on('click', function(){
      $(this).next("div").remove();
    });

http://jsfiddle.net/fz5ZT/46/

于 2012-04-19T23:57:21.760 に答える
0

$('button').on('click', 'button', clickHandler);関数を参照するために使用できclickHandlerます。

再利用可能であることは別として、次の利点があるため、私はそのようなものの大ファンです.

  • clickHandler にバグがある場合に備えて、パッチを送信するだけで済みます。
  • 誰かが匿名メソッドでは不可能な私のメソッドを拡張できます
  • 読みやすく、エラーが発生した場合にスタック トレースを確認するのにも役立ちます

それが役立つことを願っています。

アップデート：

function clickHandler(ev) {
    ev.preventDefault();
    // ... handler code
}
于 2012-04-19T23:55:36.673 に答える