1

私は何日もこれを続けてきましたが、損益分岐点に達していないようです。セルの 1 つ (最後のセル) に一連のリンクを表示するテーブルがあります。クリックすると、最後のリンクのテキスト値が変更され (jsf ajax で実装)、それが存在する行のステータスを反映して、「一時停止」から「再開」に、またはその逆になります。ドキュメントが読み込まれ、テキスト リンクが「再開」と表示されるたびに、jQuery を使用して行の背景色を変更しました。これをどのように実装したかについては、以下を参照してください

var defaultval;

$(" table tbody tr td:nth-child(7)").each(function() {
    defaultval = $(this).find("a:nth-child(4)").html();
    if (defaultval == "resume") {
        $(this).parents("tr").addClass("suspended")
    }

});​

リンクがクリックされ、そのテキスト値が「再開」に変わるたびに、この行の背景色を変更したいので、以下のJQueryコードを書きました

$("table tbody tr td:nth-child(7) ").click(function() {
    if ($(this).find("a:nth-child(4)").html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }
    else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

リンクをクリックするとうまくいくようでした。しかし、問題は、セル自体とセル内の他のリンクをクリックすると、上記の実装のためにリンクのテキストが変更されずにセルが変更されることです。そして、私がこれを行うとき：

$("table tbody tr td:nth-child(7) a:nth-child(4)").click(function() {
    if ($(this).html() !== "resume") {
        $(this).parents("tr").addClass("suspended");
    }else {
        $(this).parents("tr").removeClass("suspended");
    }
});​

一度変更すると、さらにクリックしても元に戻りません。この効果を、このリンクがクリックされたときのみに制限したいと思います。

4

1 に答える 1

1

リンク内のテキストを変更するコードは、実際にはリンク(aタグとすべて) をclick完全に置き換えています。これは、追加したイベント リスナーを削除することを意味します。次の 2 つのオプションがあります。

オプション 1

リンクを完全に置き換えるのではなく、テキストとその href (必要な場合)を変更するだけです。a元のタグを削除または置換しない場合、clickリスナーはそのまま残り、最初のクリックの後にさらに多くのクリックがトラップされます。以下により、必要な部分だけを変更することができますa。

$('table tbody tr td:nth-child(7) a:nth-child(4)')
    .attr('href', 'http://stackoverflow.com')
    .html('My new link text goes here');

オプション 2

.liveorを使用するようにイベント リスナーを変更します.on (使用している jQuery のバージョンによって異なります)。

$("table tbody tr td:nth-child(7) a:nth-child(4)").live('click', function() {
  if ($(this).html() !== "resume") {
    $(this).parents("tr").addClass("suspended");
  }else {
    $(this).parents("tr").removeClass("suspended");
  }
});​

上記は実際にはリスナーを要素にバインドするのではなく、代わりにドキュメントにバインドし、ドキュメントでクリック イベントがトリガーされると、jQuery セレクターがクリックを受け取った要素と一致するまでイベントをバブルアップします。これは、リンクを好きなだけ変更できることを意味します...さらにタグを追加することもできます...使用したjQueryセレクターと一致する限り、それらはすべて機能します。

その他の注意事項

追加の推奨事項として、あなたがしていることについて私が変更したいことが 2 つあります。

まず、:nth-child() を使用して要素をターゲットにするのではなく、それらにクラスを追加してそのようにターゲットにします。これは、テーブルのセルまたは行のサイズが変更された場合でも、将来にわたってより安全です。

次に、$(this)JavaScript で を参照する場合は、次のようにする方がはるかに優れています。

$("table tbody tr td.target-cell a.target-link").live('click', function() {
  var self = $(this);
  if (self.html() !== "resume") {
    self.parents("tr").addClass("suspended");
  }else {
    self.parents("tr").removeClass("suspended");
  }
});​

格納する変数を作成することで、毎回$(this)jQuery に計算させるのではなく、コードをかなり最適化できます。$(this)

于 2012-09-01T15:19:04.200 に答える