0

jqueryの使用中に背景色の変更の問題に直面しています。

ページが初めて読み込まれ、ユーザーがテーブル行にカーソルを合わせると、テーブル行の背景が変わります。

ユーザーがテーブルの行セルをクリックしてjqueryポップアップを生成すると、ポップアップが属する行の背景色が変わります。

ユーザーがドキュメントの任意の場所をクリックして（jqueryを使用して）ポップアップウィンドウを閉じると、最初の行に記載されている行のホバー機能のハイライトが無効になります。ポップアップウィンドウが開いています。

これは私がjqueryに追加しようとしたもので、ポップアップの1つが一度表示されるまで機能します。言い換えると、以下のコードは、必要なように有効なままではなく、1回だけトリガーされます。

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

jsフィドル：

http://jsfiddle.net/vUWsb/

4

4 に答える 4

2

試してください!important：

.fresh{background-color:#ddd !important;}

$("tr").hover(function(){
    $(this).addClass('fresh');
}, function() {
    $(this).removeClass('fresh')    
});

http://jsfiddle.net/vUWsb/6/

このようなもの？

 $("tr").hover(function(e){
        if ($(".webpopup, .phonepopup").is(":visible")) {
           return false;
        }
       $(this).addClass('fresh');     
    }, function() {
       $(this).removeClass('fresh');
 });

http://jsfiddle.net/vUWsb/10/

于 2012-06-25T18:05:05.687 に答える
1

セルをクリックした後、ホバーが機能しないようには思えません。むしろ、表のセルをクリックしたときに背景をデフォルトの白に設定しているように見えます。

$(document).click(function() {
    $("#favorites-table tr").css({
        "background-color": "#fff" // <--- this part
    });
    $(".webpopup, .phonepopup").hide();
});

インライン スタイリングはクラスを使用したスタイリングよりも優先されるため、設定している背景色によってホバー効果が隠されているため、ホバー効果が表示されることはありません。

于 2012-06-25T17:59:39.370 に答える
0

代わりに、「新鮮な」クラスに基づいて作成する必要があります。

のようなもの

    $("#favorites-table tr").css({
        "background-color": "#fff"
    });

クラス css に勝るインライン スタイルを追加します。

代わりにaddClassandを使用removeClass

http://jsfiddle.net/imoda/vUWsb/2/

于 2012-06-25T18:00:18.660 に答える
0

他の貢献者は、インライン カラーの代わりにクラスを使用する必要があることを正しく指摘しましたが、MHZ が言い続けているように、これは必要な機能のすべてではありません。ホバーの問題は、可視性をテストしようとする方法が正しくないことです。可視性の元のテストを検討してください。

if($(".webpopup,.phonepopup").is(":hidden")){
    $("tr").hover(function(){
        $(this).toggleClass('fresh');
    });
}

if 関数は常に true になります。次に、常に true であるため、ホバー イベントが作成されます。これは、ドキュメントのロード時に 1 回発生します。次に、このイベントリスナーに行き詰まります。

代わりに、MHZ、次のようなものが必要だと思います。

theyAreVisible = function() {
    var shown = $('.webpopup,.phonepopup').map(function() {
        return $(this).is(':visible') ? true : null;
    });
    return shown.length > 0 ? true : false;
};

$("tr").hover(function() {
    if (!theyAreVisible()) $(this).addClass('fresh');
}, function() {
    if (!theyAreVisible()) $(this).removeClass('fresh');

});

このようにして、ポップアップのいずれかが開いているかどうかを確認する 1 つのホバー イベント ハンドラーができます。map 関数はそれぞれをループし、開いている個体があるかどうかを調べ、見つかった場合は true を返します。ただし、if([]) は true として解決されるため、この結果をそのまま返すことはできません。検討：

if ([]) { console.log('yup!'); }

取り除く：

  1. 常にイベント ハンドラー内でチェックを行います (この場合はトグル)。
  2. あなたが真実として解決していると思うことが、実際に真実として解決されていることを確認してください。
于 2012-06-25T18:31:58.173 に答える