2

タイトルで述べたように; div の背景の「上」に色を付けることはできますか? 私がする必要があるのは、「背景色」の値を変更せずに、div の表示色を変更することです。

background-color を保持する理由は、クリックした div を比較するために使用しているためです。

var pick1 = false;
var pick2 = false;
var id1;
var id2;

$('.card').click(function(){

    if(pick1) {
        pick2 = $(this).css('background-color');
        id2 = $(this).attr('id');
        if(pick1 == pick2 && id1!=id2) alert('Correct');
        else alert('Incorrect');

        pick1 = false;
        pick2 = false;
    } else {
        pick1 = $(this).css('background-color');
        id1 = $(this).attr('id');   
    }
});

目標は、クリックされるまで、たとえば灰色で div を隠すことです: http://jsfiddle.net/94jerdaw/WJQkA/4/

編集：

div をクリックしたときにグレーを削除するにはどうすればよいですか? チェック: http://jsfiddle.net/94jerdaw/29TCZ/3/

4

3 に答える 3

3

あなたが何をしようとしているのか理解できません...しかし、仕事の後は使用しますか?

.card {
    position: relative;
}
.card:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: black;
}
.card:hover:after {
    display: none;
}

例: http://jsfiddle.net/29TCZ/

:hover をクラスに置き換えて、必要に応じて切り替えることができます。

于 2013-03-23T19:34:19.423 に答える
1

background-colorまず、 CSSbackground-colorプロパティを変更せずにdiv を変更することはできません。なんてことするんですか？

あなたが望むのは、最後の背景色を維持し（何らかのアクションのために、または元に戻すために）、それをいくつかの非表示の入力変数に保存することです。

そして、それを使用して、必要な場所に表示できます。

また、background-colorプロパティを取得as a textして div に表示したい場合は、非常に簡単に行うことができます。

var color = $('#selector').css('backgroundColor');

、ただし、RGB値が返されます。16進数が必要な場合は、

この便利な方法を使用してください：

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

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

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

ここから撮影

アップデート、

現在、あなたdivsは次のようになっています：

<div id="a1" class="card"></div>
<div id="a2" class="card"></div>
<div id="a3" class="card"></div>
..
..

そして、これらの div のそれぞれに秘密の色を割り当てたいので、while ループ内で JavaScript を使用して更新し、次のようにします。

 <div id="a1" class="card" data-color-index="1"></div>
 <div id="a2" class="card" data-color-index="2"></div>
 <div id="a3" class="card" data-color-index="3"></div>

colorsここで、特定の div をクリックすると、そのインデックスを取得して、配列からそのアイテムを選択します。あなたはsplicing元の配列なので、後で使用するためにコピーを作成する必要がありました。

data-color-index次のように jquery を介して任意の要素の属性を取得できます 。

   $('#selector').data('color-index');

このフィドルを参照してください。それはあなたがしたいことをします

于 2013-03-23T19:15:18.530 に答える
0

マニッシュが言ったように、CSS プロパティを変更せずに div の外観を変更することはできませんが、同じことを行うハックな方法がいくつかあります。1 つの例は、領域全体をカバーする色付きの正方形のそれぞれに子 div を作成し、その div の色を灰色に設定することです。その後、CSS 表示プロパティを使用して、オーバーレイ div の表示と非表示を切り替えることができます。

ただし、JavaScript で色のコピーを作成し、DOM を毎回チェックするのではなく、クリックされたときに各正方形に関連付けられた値を参照することをお勧めします。これにより、ロジックが外観から分離されます :)

于 2013-03-23T19:25:04.757 に答える