0

これは私を狂わせています...私はHTML5技術を使用して渡す要素の可視性を切り替えるjavascript関数を持っています。トリガーアンカー要素内のimgタグで表示される画像を入れ替えて、展開または折りたたまれた要素の状態に対応させたい。

私は次のコードを使用しています：

    $('a.expand-collapse').click(function () {
    var targetID = $(this).attr('data-expcoltarget');
    var target = $('div#' + targetID);
    debugger;

    target.toggle('blind');

    if (target.is(':visible')) imgSrc = contentRoot + 'images/collapse.gif';
    else imgSrc = contentRoot + 'images/expand.gif'; 

    $(this).find('img').first().attr('src', imgSrc);
});

残念ながら、target.is（'：visible'）>> always <<は、ターゲット要素の可視性の状態に関係なく、trueを返します。

私は何が欠けていますか？

編集：

マークアップを喜んで見てくれてありがとう、しかしそれは解決策を見つけるために必要ではないことがわかりました。

'data-expcoltarget'とは、要素に任意の値を割り当てるためのHTML5手法です。接尾辞data-が付いているものはすべて、パーサーによって無視されます。

この例では、引数に相当するものをjavascript関数に渡す手法を使用しています。$（this）がイベントをトリガーした要素を指しているため、これは機能します。そのため、その属性を調べて引数を探すことができます。

4

1 に答える 1

0

.toggle()問題は、パラメーターを使用して呼び出していることです'blind'。つまり、アニメーション メソッドとして機能します。アニメーションは非同期で発生し、残りのクリック ハンドラーが完了するまで完了しません。

パラメータを指定せずに呼び出す.toggle()と、トグルは即時 (アニメーションなし) になるため、コードの残りの部分は機能します。

アニメーションを保持したい場合、問題を回避する 1 つの方法は、画像変更コードを.toggle()関数の完全なコールバックに移動することです。

$('a.expand-collapse').click(function () {
    var $this = $(this),
        targetID = $this.attr('data-expcoltarget'),
        target = $('#' + targetID);

    target.toggle('blind', function() {
       if (target.is(':visible'))
          imgSrc = contentRoot + 'images/collapse.gif';
       else
          imgSrc = contentRoot + 'images/expand.gif'; 

       $this.find('img').first().attr('src', imgSrc);
    });
});

(コールバック関数の内部はトグルされる要素であるため、アンカーを参照するように外部からthisの参照を保持する必要があることに注意してください。)$(this)

私はおそらくこれをさらに「単純化」します：

$('a.expand-collapse').click(function () {
    var $this = $(this),
        targetID = $this.attr('data-expcoltarget'),
        target = $('#' + targetID);

    target.toggle('blind', function() {
       $this.find('img').first().attr('src',
           contentRoot + (target.is(':visible') ? 'images/collapse.gif'
                                                : 'images/expand.gif'));
    });
});
于 2012-07-04T02:07:47.240 に答える