0

ボタンがたくさんありますが、別のボタンをクリックすると、別の画像やテキストが表示されます。私は自分の望むことを達成することができますが、コードは非常に長く、非常に反復的であるように見えます。例えば：

   var aaClick = false;
    $("aa").observe('click', function() {
        unclick();
        $('characterPic').writeAttribute('src',"aa.jpg");
        $('characterBio').update("aatext");
        $('aa').setStyle({ color: '#FFFFFF' });
        aaClick = true;
    });

    $("aa").observe('mouseover', function() {
        if (!aaClick) $('aa').setStyle({ color: '#FFFFFF' });
    });

    $("aa").observe('mouseout', function() {
        if (!aaClick) $('aa').setStyle({ color: '#666666' });
    });

    function unclick() {
         aaClick = false;
         $('aa').setStyle({ color: '#666666' });
    }

bb、ccなども同じで、新しいボタンを追加するたびに、クリック解除機能にも追加する必要があります。これはかなり面倒で、グーグルで検索しようとしましたが、リストされているすべてのアイテムをクリックするだけでした。他のボタンがクリックされたときにボタンを上げる必要があるため、まだ理解できませんでした。

異なるIDを取り、まったく同じことを行うジェネリック関数を作成する方法はありますか？私が見ることができることから、aaを他のIDに置き換えることができれば、多くのコードを減らすことができます。ありがとう！！！

4

4 に答える 4

2

登録するDIVの名前を渡すだけの関数にすべてを組み込みます。.jpg名と一致している限り、機能するはずです。

var clicks = []
function regEvents(divName) {
    $(divName).observe('click', function() {
        unclick(divName);
        $('characterPic').writeAttribute('src',divName+".jpg");
        $('characterBio').update(divName"text");
        $(divName).setStyle({ color: '#FFFFFF' });
        clicks[divName] = true

    });

    $(divName).observe('mouseover', function() {
        if (!clicks[divName]) $(divName).setStyle({ color: '#FFFFFF' });
    });

    $(divName).observe('mouseout', function() {
        if (!clicks[divName]) $(divName).setStyle({ color: '#666666' });
    });
}
function unclick(divName) {
     clicks[divName] = false;
     $(clicks[divName]).setStyle({ color: '#666666' });
}
于 2008-11-05T20:30:30.520 に答える
1

イベントの委任。すべてのボタンにクラス (例: yourButtonClass) を指定してから...

var clicks = [];
$$('.yourButtonClass').each(function(button) {
    clicks.push(button.id);
});
$(document).observe('click', function(e) {
    // If your click registered on an element contained by the button, this comes in handy...
    var clicked = e.element().up('.yourButtonClass') || e.element();

    if(clicked.hasClassName('.yourButtonClass')) {
        unclick();
        $('characterPic').writeAttribute('src', clicked.id + '.jpg');
        $('characterBio').update(clicked.id + 'text');
        $(clicked).setStyle({ color: '#FFFFFF' });
        clicks[clicked.id] = true;
    }
});

等々...

于 2008-11-05T20:36:05.970 に答える
0

ボタンは共通のコンテナを共有していますか？次に、次のコードが機能します。

$(container).childElements().each(function(element) {
    $(element).observe('click', function () { … });
    …
});

または、これを行うこともできます。

["aa", "bb", "cc"].each(function(element) { … same code … });
于 2008-11-05T20:26:18.687 に答える
0

イベント ハンドラーには、イベント ターゲットに設定される引数を指定できます。次に、同じ関数を再利用できます。

var clickedHandler = function(element) { 
  $(element).addClass("selected");
};
$("aa").observe('click', clickedHandler);
$("bb").observe('click', clickedHandler);

また、CSS スタイリングが切実に必要です。前の質問に対する私の回答をご覧ください。ただし、他のイベントにパターンを再利用することもできます。

于 2008-11-05T20:33:56.427 に答える