0

xsltとjavascriptを使用してデータのテーブルを表示しています。私のテーブルデータの1つは、ボタンとして使用している画像です。このボタンはfor-eachタグ内にあるため、xmlからのデータの各インスタンスに表示されます。jqueryを使用してクリックするとこのボタンを非表示にして、正常に機能するボタンリンクをさらに表示します。唯一の問題は、クリックされている画像のみにこれを適用する場合に、ページ上のすべてのボタンに対してこれを行うことです。xslファイルで作業していることを考慮して、この問題を回避するにはどうすればよいですか？各タグののために各ボタンに一意のIDがありませんか？

さらにいくつかの背景情報については、クラス属性を使用してjqueryで選択しましたが、まったく別のソリューションを実装することもできます。

どんな助けでも大歓迎です、

前もって感謝します

4

3 に答える 3

2

のハンドラーがあると仮定するとbutton、を使用する必要があります

$(this).hide()それ以外の$('.buttonclass').hide()

基本的にハンドラー内でthis、イベントをトリガーした要素であるを使用します。これを使用して、対応する要素、要素の親、兄弟などにアクセスできます。

于 2012-05-17T20:18:00.213 に答える
1

クリックの参照を渡す必要があります。

例えば：

<img onclick="hideImage(this)" />

次に、関数で：

function hideImage(img){
  //img is your image
}

または、各イメージのイベントを回避するために、イベントを親ノードに委任できます。これはテーブルの場合があります。

<table onclick="hideImage(event)">

次に、関数で：

function hideImage(ev){
  var elm = ev.target || ev.srcElement;
  if(elm.tagName !== 'IMG'){
    elm = elm.getElementsByTagName('IMG')[0];
  }
  //elm is your image
}
于 2012-05-17T20:17:39.800 に答える
1

HTML/XMLが次のようになっていると仮定します

<ul class="someClass">
    <li><img src="/some/path" /></li>
    <li><img src="/some/path" /></li>
</ul>

jQuery 1.7以降を使用すると、次のようなことができます

$('ul.someClass').on( 'click', 'img', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

上記のJavaScriptコードでは、はすべての画像要素ul.someClassの共通の親を参照し、ハンドラーをトリガーする要素を参照します。ハンドラー自体では、変数はイベントをトリガーした要素に設定され、あなたの場合は要素を参照します。このコードは、非常に強力で便利なイベント委任を使用します。imgthisimg

jQuery 1.4以降（もちろん1.7より前）を使用している場合は、次のように実行できます。

$('ul.someClass').delegate( 'img', 'click', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

お使いのバージョンが1.4より前の場合は、更新する必要があります。または、次のように行うことができます。

$('ul.someClass').find('img').bind('click', function( event ) {
    var imgElement = this;

    $(imgElement).hide();
});

このスニペットはイベント委任を使用しません。

jQueryをまったく使用しない場合は、次のようにすることができます（動作するデモ http://jsfiddle.net/pomeh/u6etD/）：

function hideElement( element ) {
    // code to hide "element" variable
}

function hideImageHandler( event ) {
    var target = event.target || event.srcElement;

    // make sure the click happened on an <img /> element
    if ( target && target.nodeType === 1 && target.tagName.toLowerCase() === 'img' ) {
        hideElement( target );
    }

}


var ul = document.getElementsByTagName('ul')[0];

if ( ul.addEventListener ) {
    ul.addEventListener( 'click', hideImageHandler, false );
}
else if ( ul.attachEvent ) {
    ul.attachEvent( 'onclick', hideImageHandler);
}
于 2012-05-17T20:26:16.617 に答える