1

<p>text</p>ユーザーのクエリにより複数の要素を作成するphpスクリプトがあります。ユーザーが特定の要素をクリックするたびに、この要素のテキストがテキストボックスに表示されるオプションを作成したいと思います。このようなタスクを実行する直感的な方法は次のとおりです。

<p class="c1"> textA...</p>
<p class="c2"> textB...</p>
<p class="c3"> textC...</p>
<p class="c4"> textD...</p>

jQueryコードは次のようになります：

$("p.c1").click(function(){ code... }
$("p.c2").click(function(){ code... }
etc ...

この機能を実装するための洗練された方法はありますか？

どんな提案も役に立ちます、

前もって感謝します

4

3 に答える 3

4

イベントの委任。

$('body').on('click', 'p[class^=c]', function(evt) {
    var clickedPara = $(this);
});

classそこで、属性が。で始まる段落をフィルタリングしcます。これは単なる実証ですが、最終的にはあまり水密ではない可能性があります。要素に共通のクラスを与える必要があります。このクラスがたとえば「clickablePara」の場合は、代わりに次を使用できます。

$('body').on('click', 'p.clickablePara', function(evt) {

イベントの委任とは、多くのイベントを可能な各要素にバインドするのではなく、1つのイベントをバインドし、トリガー要素が発生したときに評価することを意味します。これが初めての場合は、調べる価値があります。もしあなたがたまたま英国にいるのなら、.NET Magazineの次の版には、私がそれについて議論している記事があります。

于 2012-07-29T18:52:23.317 に答える
1

複数のクラスを HTML 要素に割り当てることができます。複数のクラスを出力するように PHP スクリプトを変更できます。すなわち

<p class="c1 clickable"> textA...</p>
<p class="c2 clickable"> textB...</p>
<p class="c3 clickable"> textC...</p>
<p class="c4 clickable"> textD...</p>

その後、クリック機能を使用できます。

   $("p.clickable").click(function () {
                $('#yourtextbox').val($(this).text());
            });

JSFIDDLE

于 2012-07-29T18:57:17.760 に答える
1

ajaxで挿入された動的要素については何も言わないので、要素はページが出力される前にサーバー側で作成され、委任は必要ないと思いますか?

$("p[class^='c']").on('click', function() {
    $("#textboxID").val(this.innerHTML);
});

フィドル

于 2012-07-29T19:03:50.653 に答える