0

イベント ターゲット要素から属性を取得するのに問題があります。

php を使用して mysql データベースにアクセスしています。クエリから、いくつかの画像ファイル名とそれぞれの ID を取り出します。次に、これらの画像を次の行でテーブルに表示します。

print '<td><img id="img_' . $row['paint_id'] . '" class="thumb_target" src="img/paint/thumb/' . $row['paint_thumb'] .'"></td>';

ご覧のとおり、この行は各画像に id 'img_xx' を与えます。ここで、xx は sql データベース内の画像の数値 ID です。また、各画像にクラス「thumb_target」を与えます。ドキュメントの準備ができたら、thumb_target 要素の .click イベントを設定します。これにより、img_xx id をデータとして渡す AJAX 呼び出しが行われます。私はこれをクロムで動作させました

data: 'imgID=' + event.target.id

しかし、数時間後、Firefox で何か他のことを確認することにしましたが、すべてのブラウザーで機能しないことがわかりました。jQuery のメソッドを使用する:

var id = $(this).attr('id');

id を undefined 以外にすることはできません。私が考えている要素とは異なる要素をターゲットにしていますか?

関連するJavaScriptは次のとおりです。

function runClick() {
  var id = $(this).attr('id');
  alert(id);
  $.ajax({
    url: 'overlay.php',
    //~ data: 'imgID=' + event.target.id,
    //~ data: ({ imgID: id }),
    data: 'imgID=' + id,
    dataType: 'json',
    success: function(data, textStatus, jqXHR) {
        processJSON(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert("Failed to perform AJAX call! textStatus: (" + textStatus +
              ") and errorThrown: (" + errorThrown + ")");
    }
  });
}

$(document).ready( function() {
  $('.thumb_target').click( function() {
    runClick();
  });

  $('#overlay').hide();
});

テスト ページへのリンクは次のとおりです: http://www.carlthomasedwards.com/painting2.php

4

2 に答える 2

2

runClickはグローバル スコープで実行されるためthis、グローバル オブジェクト( window)を参照します。

代わりにそれを使用してください：

$('.thumb_target').click( function(event) {
    runClick.apply(this);
  });

またはさらに単純です：

$('.thumb_target').click( runClick);
于 2013-09-06T23:59:19.340 に答える