Jqueryでbackground-colorを変更する

Question

現在、
→ダブルリックした要素は
css('background-color','#bbbbbb')で据え置く

→hoverされた要素は
mouseenter時は
css('background-color','#abfeb6');
mouseleave時は
$(this).css('background-color','');

→ただしダブルクリックされた要素で#bbbbbbになっているものは
mouseenter時は
css('background-color','#abfeb6');
mouseleave時は
css('background-color','#bbbbbb');

としたいと考えております。
つまり、一度灰色（#bbbbbb）にしたものは、hoverされてポインタが載っている時は色が変わって欲しいけれども
ポインタが離れた時には無色になって欲しくない（灰色のままでいて欲しい）ということになります。

これについて、下記のコードで対応ができなかったのですが、
どこに問題があるのでしょうか。

ブラウザ環境:Chrome バージョン: 62.0.3202.75

<div class="elements">xxxxx<div>

$(function(){
$('.elements').hover(function(){
  $(this).css('background-color','#abfeb6');
}, function() {
  if ($(this).css("background-color")=="rgb(187,187,187)"||$(this).css("background-color")=="hex(#bbbbbb)") {
    $(this).css('background-color', 'rgb(187,187,187)');
  }else{
  $(this).css('background-color','');
  }
});
});


$(function(){
$('.elements').on('dblclick',function(){
    $(this).css('background-color','#bbbbbb');
});

Answer 1

色の変化についてはclassの付け替えとcssでやったほうが良いのでは？

.elements:hover,.elements.gray:hover{
  background-color:#abfeb6;
}
.elements.gray{
  background-color:#bbbbbb;
}

$(function(){
  $('.elements').on('dblclick',function(){
    $(this).addClass('gray');
  });
});

<div class="elements">xxxxx<div>

追記

.elements動的に作成して処理したいとのことなので以下修正版です

/* 変更なし */
.elements:hover,.elements.gray:hover{
  background-color:#abfeb6;
}
.elements.gray{
  background-color:#bbbbbb;
}

$(function(){
  /* elements追加処理、適当なので状況にあわせて要修正 */
  $('input[type=button][value=add]').on('click',function(){
    $('#testarea').append($('<div>').addClass('elements').text('xxxxx'));
  });
  /* dblclick処理はセレクタを修正 */
  $(document).on('dblclick','.elements',function(){
    $(this).addClass('gray');
  });
});

<!-- addボタンをおすと.elementsが#testareaに追加されます-->
<input type="button" value="add">
<div id="testarea">
<div class="elements">xxxxx</div>
</div>

Comments

[SugiuraY]

コメントを頂き、有難うございます。
動的に生成された要素で既存のcssを適用させる方法が調べてもうまく動作させることができなかったため、そのあぷろーちはあきらめておりました。もう一度調べてみます。
もう一度調べてみます。

[yambejp]

> 動的に生成された要素で既存のcssを適用させる方法

動的要素でも自動的にcssは反映されると思います
念のため動的処理を前提に修正版を追記しておきました

[SugiuraY]

yambejp様
ご丁寧に有難うございます。
仰るとおり、問題なくCSSが反映されておりました。
動的に生成された場合反映されたのは他の点に問題があったからかと思いますので
個別に検証してみます。

Answer 2

単純にこの記述だとif文のtrueに引っ掛かりません。

まずダブルクリックで色を#bbbbbbに変更しますね。
そしてhover時に色を#abfeb6に変更するのと同時に、ダブルクリックした時の#bbbbbbがいなくなります。
その後のfunction内if文突入時のbackground-colorは100%「#abfeb6」です。
なのでこのif文は100%false判定しかされません。

他の方法もありますが、このままの記述でやりたいのだとすれば、以下解決方法です。

$(function() {
　var bgColor;
　$('.elements').on('dblclick',function(){
    $(this).css('background-color','#bbbbbb');
　　bgColor = $(this).css('background-color');
　});

  $('.elements').hover(function() {
    $(this).css('background-color','#abfeb6');
  }, function() {
      if (bgColor == "rgb(187,187,187)" || $(this).css('background-color' == "hex(#bbbbbb)") {
        $(this).css('background-color', 'rgb(187,187,187)');
        bgColor = $(this).css('background-color'); 
      } else {
        $(this).css('background-color','');
        bgColor = $(this).css('background-color');
      }
  });
});

hoverして変更する前のbackground-colorを変数に残しておきます。
out時の戻す処理の際に、そのもともとの色を判定してあげれば良い思います。

Comments

[kei344]

bgColor がスコープをまたいで利用されているので、このままでは動きませんよ。

[rnosh]

bgColorを外に出す必要がありますね・・・。
ご指摘ありがとうございます。

[SugiuraY]

コメントを頂き、有難うございます。確かにhoverした瞬間に色が変わってしまっているので、判定ができない点と、それでは常にifの評価もfalseが返ってくることは理解できました。
一方で、それぞれのfunction（enter時とleave時）はローカルスコープのため、var bgColorを設定しても後の判定式でundefinedになるのではないでしょうか？

[SugiuraY]

すみません、ちょうどコメントが重複してしまいました、ご放念下さい。

[SugiuraY]

hover時の$(this).css('background-color')を取得したいので、外に出すことは可能なのでしょうか。。
せっかく教えて頂いたのに、方法が思いつかなかったため、コメントをさせていただきました。

Answer 3

JavaScriptだけでやるならフラグをつけるとかする必要があります。
if ($(this).css("background-color")=="rgb(187,187,187)"||$(this).css("background-color")=="hex(#bbbbbb)") { この部分では必ず #abfeb6 の rgb(171, 254, 182) が返ってくるため判別できません。（ rgb(187, 187, 187) で判別すればダブルクリック1回目は通りますが、2回目にダブルクリックしなければ消えます）

$(function(){
  $('.elements').on('dblclick',function(){
      $(this).css('background-color','#bbbbbb');
  });
});

.elements:hover {
  background-color:#abfeb6 !important;
}
```**動くサンプル：**[https://jsfiddle.net/pwm45cpz/](https://jsfiddle.net/pwm45cpz/)

Comments

[SugiuraY]

コメント有難うございます。
無理にJSで複雑化させていました。
一番シンプルな方法で、解決することができました。また、CSSが不案内であまりimportantを気にしたことがなかったのですが、挙動が重複するときに優先順位をつけることができるのですね、この機会に勉強してみます！
宜しくお願い申し上げます。