1

たとえば、タグに基づくjQuery関数で使用しようとしてifいます。これが何かを行う場合、それ以外の場合は、他のことを行います。私はこのように試しました：elsebackgroundColorlibackgroundColor = #ccc

if ($(this).css('backgroundColor = #EBE5C5')) {

しかし、それは正しく機能しません、あなたは私を助けることができますか？

うーん、どうもありがとう、しかしそれはまだ正しく機能していません、ここで完全な機能を見てください：

$(function(){
$('.slider-nav li')
    .mouseover(function(){
        if ($(this).css('background-color') == "#EBE5C5") { 
            $(this).stop().animate({'backgroundColor':'#c0ba9f'},250);
        }
    })
    .mouseout(function(){
        $(this).stop().animate({'backgroundColor':'#EBE5C5'},250);
    })
});
4

4 に答える 4

2

jQuery は HEX ではなく RGB を提供します

jQuery は、要求されたときにrgb値を返します。#CCCたとえば、背景色を に設定し#CCC、jQuery で要求した場合:

$(".foo").css("backgroundColor"); // rgb(204, 204, 204)

RGB から HEX を取得する

これは、RGB を HEX に変換する手段が必要になることを意味します。この質問は、ここ Stack Overflow で尋ねられ、回答されています。jQuery で RGB 値ではなく HEX 値を取得するを参照してください。私たちの目的のために、以下の関数を使用できます。

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

滑らかな背景色のアニメーションを可能にする

これにより、検索と比較が処理されます。$.animate()次に、メソッドを少しだけ拡張する jQuery UI コアをロードする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui..."></script>

背景色のアニメーション

jQuery UI のコア インプレース (フル パスはこちら) を使用すると、次のことができます。

$(".foo").animate({ backgroundColor: "#999999" }, 1000);

#999999これにより、背景が最初から まで、1 秒かけて徐々にアニメーション化されます。

すべて一緒に今

最終的には次のようになります (jQuery UI のコアがリンクされていると仮定します)。

//Function to convert hex format to a rgb color
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

$("#hello").on("click", function(e){
  background = rgb2hex( $(this).css("backgroundColor") );
  if ( background == '#cccccc' ) {
    $(this).animate({
      backgroundColor: "#123456",
      color: "#fff"
    }, 1000);
  }
});

オンラインデモ: http://jsbin.com/uwiyon/edit#javascript,html

于 2012-04-18T21:21:48.873 に答える
1

次のようになります。

if ($(this).css('background-color') == 'red') {
   // do somethig
} else {
   // do something else
}

1 つの等号は代入であることを忘れないでください。

jsFiddle は次のとおりです。

http://jsfiddle.net/F6WeR/1/

于 2012-04-18T21:07:54.633 に答える
0

試す：

if( $(this).css('backgroundColor').indexOf('#EBE5C5')!=-1 )

.css とセレクターを使用すると、値を取得できます。次に、新しい値が含まれているかどうかを確認します

これも機能するはずですが、この値が効果的に返されるかどうかを確認する必要があります。最初に値を確認してください

$(this).css('backgroundColor')

そして試してみてください

if( $(this).css('backgroundColor')=='#EBE5C5' )
于 2012-04-18T21:09:35.527 に答える
0

比較する必要があります。「$(this).css("backgroundColor")」は背景色を返します

if ($(this).css("backgroundColor") === "#EBE5C5") {

厳密な比較のための 3 つの等号に注意してください (「==」も使用できますが、これは少し高速です)。

于 2012-04-18T21:09:59.463 に答える