1

チェックするイベントが約12あり、すべてのセレクターに同じように（繰り返し）名前が付けられています。このルーチンを短縮するにはどうすればよいですか？

$(document).ready(function() {
    $(document).on('click','#del_od1', function() {
        $('#change_od1').val('YES');
        $('#span_od1').html('(Deleted)');
        $('#status_od1').val('DELETED');
    });
    $(document).on('click','#del_od2', function() {
        $('#change_od2').val('YES');
        $('#span_od2').html('(Deleted)');
        $('#status_od2').val('DELETED');
    });
    $(document).on('click','#del_od3', function() {
        $('#change_od3').val('YES');
        $('#span_od3').html('(Deleted)');
        $('#status_od3').val('DELETED');
    });
});

この質問の名前は適切ではありません。誰かがより正確なタイトルを提案することもできますか？答えを受け入れる前にそれを変更します。

編集：

ajax呼び出しに応答して、テーブル構造全体がエコーアウトされます。テーブルの上部は次のようになります。

$r = '
    <table id="DocTable">
        <tr>
            <th width="170">Document Title</th>
            <th width="170">MetShare FN</th>
            <th width="50">Action</th>
            <th width="50">Delete</th>
        </tr>';

呼び出しで要求された情報を含むいくつかの無関係な行が続きます。次に、これが前のビットに追加され、すべてが。としてエコーアウトされecho $r;ます。

$rest_docs =  $aProj['all_project_docs'];
$ocnt = 0;
if ($rest_docs !== ''){
    $ocnt = $ocnt + 1;
    $aRest_docs = explode('?',$rest_docs);
    foreach($aRest_docs as $doc){
        $aDoc_parts = explode('|',$doc);

        $r = $r . '
        <tr>
            <td>'.$aDoc_parts[0].'</td>
            <td>
                <span id="span_od' . $ocnt . '">
                    <a href="'.$aDoc_parts[1].'" target="blank">
                    '. $aDoc_parts[1] .'
                    </a>
                </span>
                <input type="hidden" id="status_od' . $ocnt . '" name="status_od' . $ocnt . '">
            </td>
            <td>
                <a id="change_od' . $ocnt . '" class="normal" href="#">change</a>
                <input type="file" id="if_od' . $ocnt . '" name="if_od' . $ocnt . '" style="display:none">
                <input type="text" style="display:none">
            </td>
            <td>
                <a href="#" id="del_od' . $ocnt . '">delete</a>
            </td>
        </tr>';
    }
}

echo $r;
4

4 に答える 4

3

jsBin（たとえば）デモ

このすべての名前に共通すること...

   del_od1
change_od1
  span_od1
status_od1

is:      1      :)   (a number, and so for all other elements)

...だから私たちはそれをつかむ必要があります！見る：

$(document).ready(function() {
    $(document).on('click','[id^=del_od]', function() {//^="starts with selector"

        var num = this.id.split('od')[1];  // returns our number from the id!
        // from now on we can use our var "num" :

        $('#change_od'+ num).val ('YES');
        $('#span_od'  + num).html('(Deleted)');
        $('#status_od'+ num).val ('DELETED');
    });
});
于 2012-09-15T00:15:16.240 に答える
2

明白な方法は

$(document).ready(function() {
    for(var i = 1; i < 10; ++i) {
        $(document).on('click','#del_od' + i, (function(index) {
            return function() {
                $('#change_od' + index).val('YES');
                $('#span_od' + index).html('(Deleted)');
                $('#status_od' + index).val('DELETED');
            };
        })(i));
    }
});

ただし、IDの代わりにクラスを利用し、ドキュメントの構造に関する情報を活用することで、この野蛮なコーディングスタイルがなくても同じ効果が得られる可能性が非常に高くなります。その例を挙げていただけますか？

于 2012-09-14T23:46:03.860 に答える
1

jQueryでは、クロージャを回避してevent.data代わりに使用できます。これは私にはきれいに見えます。

jQuery(document).ready(function($) { 
    for(var i = 1; i < 10; ++i) {
        $(document).on('click','#del_od' + i,{'index': i},function(e) {
            var index = e.data.index;
            $('#change_od' + index).val('YES');
            $('#span_od' + index).html('(Deleted)');
            $('#status_od' + index).val('DELETED'); 
        })
    }
});

デモ

参照

于 2012-09-15T05:39:59.943 に答える
0

idからidサフィックスを解析することにより、1つのイベントハンドラーでそれらすべてを提供できます。

$(document).ready(function() {
    $(document).on('click','[id^="del_"]', function() {
        var suffix = this.id.replace(/^.*?_/, "");
        $('#change_' + suffix).val('YES');
        $('#span_' + suffix).html('(Deleted)');
        $('#status_' + suffix).val('DELETED');
    });
});

これは、影響を受けるアイテムに対する削除ボタンのHTML関係を使用することでも解決できます。

さまざまなターゲットのクラスを使用するようにHTMLを変更できる場合は、押されたボタンと目的のターゲットの関係を使用するだけで、IDなしで次のように実行できます。

    <tr>
        <td>'.$aDoc_parts[0].'</td>
        <td>
            <span id="span_od'  . $ocnt . '" class="spanTarget">
                <a href="'.$aDoc_parts[1].'" target="blank">
                '. $aDoc_parts[1] .'
                </a>
            </span>
            <input type="hidden" id="status_od' . $ocnt . '" class="statusTarget" name="status_od' . $ocnt . '">
        </td>
        <td>
            <a id="change_od' . $ocnt . '" class="changeTarget normal" href="#">change</a>
            <input type="file" id="if_od' . $ocnt . '" name="if_od' . $ocnt . '" style="display:none">
            <input type="text" style="display:none">
        </td>
        <td>
            <a href="#" id="del_od' class="deleteButton" . $ocnt . '">delete</a>
        </td>
    </tr>';

そして、これは位置とクラス（IDなし）のみに基づくスクリプトになります。

$(document).ready(function() {
    $(document).on('click', '.deleteButton', function() {
        var parent = $(this).closest("tr");
        parent.find('.changeTarget').val('YES');
        parent.find('.spanTarget').html('(Deleted)');
        parent.find('.statusTarget').val('DELETED');
    });
});

これにより、クリックされた削除ボタンがあった行が取得され、同じ行にある変更、スパン、およびステータスオブジェクトが検索され、それらが操作されます。IDはまったく使用されません。これは、クリックされたボタンの位置を使用して、操作対象のオブジェクトを検索します。

于 2012-09-14T23:56:15.200 に答える