1

色のオプションのリストを含むこのメニューがあります。色の 1 つは「青」で、クラスは「選択済み」で、私の背景色は「青」です。選択したクラスの色に応じて背景色を変更したい。クラスを変更する方法はすでに知っていますが、「選択された」クラスをコーディネートする色で識別する方法を知りたいです。

これが私のコードです：

jQuery :

var coorColor;
$(".item").click(function() {
    $(".item").removeClass("selected");
    $(this).addClass("selected");
    $("body").css("background", coorColor);
});

// THIS IS THE PART I NEED HELP WITH

if($(".item.red.selected")) {
    coorColor = "red";
}

if($(".item.green.selected")) {
    coorColor = "green";
}

etc...

HTML:

<ul>
    <li class="item blue selected">Blue</li>
    <li class="item red">Red</li>
    <li class="item green">Green</li>
</ul>

CSS:

/* because the item "blue" is selected by default the body's bg-color is blue by default but will change according to jQuery */

body {
    background: blue;
}

.selected {
    text-shadow: 1px 1px 10px #565756;
}
4

3 に答える 3

2

選択した要素のクラスを確認できます。

$(".item").click(function() {
  $(".item").removeClass("selected");
  $(this).addClass("selected");

  if ($(this).hasclass("blue")) {
    coorColor = "blue";
  } else if ($(this).hasclass("red") {
    coorColor = "red";
  }

  $("body").css("background", coorColor);
});
于 2012-11-25T23:31:47.200 に答える
1

少し単純なアプローチは、data-属性を使用することです。

<ul>
    <li data-color="blue"  class="item blue selected">Blue</li>
    <li data-color="red"   class="item red">Red</li>
    <li data-color="green" class="item green">Green</li>
</ul>

コードは次のようになります。

var coorColor = $('.item.selected').data('color');
于 2012-11-25T23:35:32.197 に答える
0

アイテムに対してこれらのクラスのみを使用する場合は、これを行うことができます

$(".item").click(function() {
    $(".item").removeClass("selected");

    /* this will eliminate the unwanted classes leaving just the color class */
    var coorColor = $(this).attr('class').replace(new RegExp('item|anotherClass| ', 'g'), '');

    $(this).addClass("selected");
    $("body").css("background", coorColor);
});
于 2012-11-25T23:47:37.310 に答える