それは動作します。しかしそれはベストプラクティスですか？

Question

私が新しい言語を学び始めるとき、私はいつも実用的で標準的な方法ではないと感じています。 jQueryに関する質問があります。もし私がやっていることが受け入れられるのであれば。

私には3つの画像があります。

<img src="del.png" class="delete user" /> 
<img src="del.png" class="delete event" /> 
<img src="del.png" class="delete recipe" /> 

次に、$（ '。delete'）でjQueryがクリックイベントを検出しました。

$('.delete').click(function() { 
    if($(this).hasClass('user')) { 
     action = 'user' 
    } 

    if($(this).hasClass('event')) { 
     action = 'event' 
    } 

    if($(this).hasClass('recipe')) { 
     action = 'recipe' 
    } 

    // I then use ajax, send the action as $_POST to the PHP script 
    // and it tells PHP what to delete. 

    // Doing it this way, I don't have to use 3 onclick functions and 3 ajax functions. 


}); 

Answer 1

私は@ Tommiに同意します。あなたは必要以上にコードを書いておらず、3つのおおまかなajax呼び出しを持つ代わりに、ajax呼び出しを1つの場所に統合しています（またはajax関数を記述し、 3つの別々の場所）。

これがうまく動作し、混乱しない場合は、問題はないと思います。実際には、あなたがしようとしていることを醜く、控えめなやりかたでやり遂げるにはいくつかの方法がありますが、これはその1つではありません。

Answer 2

私はあなたがしていることを行うその方法に何も問題はないと言いたいと思います。このようなディスパッチャ関数でデュアルクラスを使用するのは、実際にはきれいで読みやすいです。

Answer 3

オブジェクトがユーザーとイベントをクラスとして持つ場合、アクションはユーザーではなくイベントになりますか？

Answer 4

この解決策は、システムが動作するようにjavascriptに依存するようにします。もっと頑強な解決策は、少なくとも機能のあるものをビルドし、javascriptを使わずにをロードし、次にjavascriptを使用してボタンの動作を変更して何かもっとajax-yを実行することです。

このようにするにはもっとコードが必要ですが、は優雅と見なされます。しかし、あなたが "最高の"解決策を探しているなら、「JavaScriptがない」コーナーケースを扱うことが優先かどうかを判断して決定することができます。

これまでに決断を下したことは、後であなたを驚かせる代わりに意識的に何らかの決断を下すべきです。

Answer 5

AJAX用に別の関数を作成し、actionを渡したい場合があります。

コードでは、アクションを動的に変更し、1つのアクションに対して複数のアクションを設定することができます。img私はこれが意図的であるかどうかを記録します。

Answer 6

このコードは独立して見れます。私はあなたの要素に機能を追加するjqueryに頼るのではなく、<a>のonClickイベントを直接使用することをお勧めします。

jqueryは許容できる仕事ですが、実際にはonClickイベントに関連付けられているイベントハンドラが実際に表示されるため、読みにくいコードになります。私は実際にどのコードが実際に実行されているかを見ることができ、Firebugのようなツールを使って私が提供されているページを調べることを好みます。

あなたがコードを読んだ唯一の人であれば、これは問題ではありません。私はこのような何かをするために誘惑された場合は

Answer 7

私は新しいタイプのために追加する

<a href="#" class="delete type:foo">delete foo</a> 
<a href="#" class="delete type:bar xxx">delete bar</a> 
<a href="#" class="delete">do nothing</a> 

追加のコードのようにもう少し、要素上で使用されるこの

function getType(elem) 
{ 
    var m = /\btype:([a-zA-Z_]+)\b/.exec(elem.className); 
    return m ? m[1] : null; 
} 

function deleteType(type) 
{ 
    // delete code instead of alert 
    alert("Deleting type " + type); 
} 

$(function() 
{ 
    $(".delete").click(function(ev) 
    { 
     var type = getType(this); 
     if (type) 
     { 
      deleteType(type); 
     } 
     return false; 
    }); 
}); 

のようなものを一般化します。

<ul> 
    <li>Some text <a href="delete.php?do=user">delete</a></li> 
    <li>Some text <a href="delete.php?do=event">delete</a></li> 
    <li>Some text <a href="delete.php?do=recipe">delete</a></li> 
</ul> 

あなたはAJAXの成功の上に異なる機能を起動する必要がある場合は、その後、もちろん、

$('.delete').click(function(){ 
    var t=$(this); 
    jQuery.ajax({ 
     type: "GET", 
     url: t.attr('href'), 
     cache: false, 
     success: function(data){ 
      t.parent().remove(); // you remove the whole li tag 
     } 
    }); 
}); 

この方法を行うことができます。あなたはLI構造（または類似したもの）を持っていると仮定

Answer 8

私は思うあなたの方法は、最高の選択です。

Answer 9

あなたのコードを読んだとき、私はコード構造の繰り返しがあることを特に短いものにリファクタリングするという同じ衝動を持っていました。

次の解決策は、クリックされたdivのクラスのリストを取得します。次に、リストされた最後のクラスを取得します。

$('.delete').click(function() { 

    // Your 'action' class type must always be the last in the list 
    action = $(this).attr('class').split(' ').slice(-1); 

    // Remaining logic goes here... 

});