1

私の問題で簡単な例を作成したので、理解しやすいと思います。すべてグレーのがいくつかdivありますが、そのうちの 1 つにカーソルを合わせると、実際の色が表示されます。それらの1つをクリックすると（クリックされたことを警告します）、色が変わり、.hover()別の要素がクリックされるまで、この要素では機能しなくなります。私はここに1時間座っていますが、うまくいきません:

.test { background-color: #ccc;}
<div class="test" id="d1"></div>
<div class="test" id="d2"></div>
<div class="test" id="d3"></div>

そしてスクリプト：

$(function() {
$('#d1').hover(function() { $(this).css('background-color', '#F00'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d2').hover(function() { $(this).css('background-color', '#F0F'); }, function() { $(this).css('background-color', '#CCC'); });
$('#d3').hover(function() { $(this).css('background-color', '#00F'); }, function() { $(this).css('background-color', '#CCC'); });

$('#d1').click(function() { $(this).css('background-color','#F00'); alert("clicked")});
$('#d2').click(function() { $(this).css('background-color','#F0F'); alert("clicked")});
$('#d3').click(function() { $(this).css('background-color','#00F'); alert("clicked")});

}))

リンクはここをクリック

ホバーはまだ機能しているようで、背景色がすぐに削除されます。

前もって感謝します！

4

5 に答える 5

2

まあ、コードをあまり変更しなくても[リファクタリング]:

$(function() {
    var clickedId = '';

    $('#d1').hover(function() {
        $(this).css('background-color', '#F00'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });
    $('#d2').hover(function() { 
        $(this).css('background-color', '#F0F'); 
    }, function() { 
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }     
    });
    $('#d3').hover(function() { 
        $(this).css('background-color', '#00F');
    }, function() {
        if (this.id != clickedId) {
            $(this).css('background-color', '#CCC');
        }
    });

    $('#d1').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d2').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });
    $('#d3').click(function() {
        clickedId = this.id;
        $('.test').not(this).css('background-color','#CCC');
        alert("clicked");
    });

 })

変更点:

  • 変数を使用して、最後にクリックされた要素の ID を保持します
  • 要素をクリックすると、そのクリックされた要素の ID が保存されます。また、すべての要素 (クリックしたものを除く) を元の背景色に戻します。
  • ホバーアウト時に、ホバーを失った要素が最後にクリックされた要素の ID であるかどうかを確認します (そうである場合は、その背景を元に戻さないでください)。

余談ですが、私はおそらく CSS クラスを使用.activeし、クリックされた要素に設定し、.test:hover. しかし、これは学習目的のための初歩的な JavaScript の例だと思います。

また、CSS を使用したものを見たい場合: http://jsfiddle.net/MgTr4/1/

于 2013-09-03T20:35:56.730 に答える
1

HTML

<div class="test" data-selected-item="d1" id="d1"></div>
<div class="test" data-selected-item="d2" id="d2"></div>
<div class="test" data-selected-item="d3" id="d3"></div>

CSS

.test { margin-left: 50px; background-color:#CCC; height: 50px; width: 50px; float: left; margin-top: 50px; }
.d1 { background-color : #F00 !important;}
.d2{ background-color : #F0F !important;}
.d3 { background-color : #00F !important;}

JS

  $(function() {
    $('.test').click(function() {
        $(this).hasClass($(this).data('selected-item')) ? $(this).removeClass($(this).data('selected-item')) : $(this).addClass($(this).data('selected-item'));
    });
});

サンプル http://jsfiddle.net/sheeban/gEftm/3/

于 2013-09-03T20:57:01.937 に答える
-1

このような場合は css を使用することをお勧めします。JavaScript ソリューションはより複雑です。あなたの場合、コードの「ホバー」ブロックを変更して、CSS ルールに変更できます。

#d1:hover { background-color: #F00; }
#d2:hover { background-color: #F0F; }
#d3:hover { background-color: #00F; }

以下に例を示します: jsFiddle、編集後: jsFiddle2

于 2013-09-03T20:38:15.080 に答える