2回のクリック - 別のアクション（同じdiv）

Question

誰かが助けてくれることを願っています！私はそれがランダムにいくつかの背景色を取得する必要がありますいくつかのdivをクリックすると

<div class="container"> 
    <div class="row" id="r2"> 
     <div class="col-lg-8"> 
      <div class="block-in-div"></div> 
     </div> 
     <div class="col-lg-4"> 
      <div class="col-lg-12"> 
       <div class="block-in-div"></div> 
      </div> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <div class="col-lg-4"> 
         <div class="row"> 
          <div class="col-lg-12"> 
           <div class="block-in-div"></div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-lg-12"> 
           <div class="block-in-div"></div> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-lg-12"> 
           <div class="block-in-div"></div> 
          </div> 
         </div> 
        </div> 
        <div class="col-lg-8"> 
         <div class="block-in-div"></div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

： は、私のような（ブートストラップを使用して）いくつかのdivを持っています。 別のdivをクリックすると、その背景がリセットされ、新たにクリックされたdivはランダム背景を取得するはずです。 この問題はすべてが明確です。

私は次のようにすることはできません：私はdivをクリックして、色を変えて、もう一度クリックして、それが大きくなるはずです。

色ランダマイザ：

function getRandomColor() { 
    var r=Math.floor(Math.random() * (256)); 
    var g=Math.floor(Math.random() * (256)); 
    var b=Math.floor(Math.random() * (256)); 
    var color = '#' + r.toString(16) + g.toString(16) + b.toString(16); 
    return color;}; 

リセット背景：

function cancelBg() { 
let selectedBlocks = $("div.block-in-div"); 
$.each(selectedBlocks,function(key,value){ 
    selectedBlocks[key].style.background = "none"; 
});}; 

主な機能：

のようになめらかにしようと

$(document).ready(function() { 
$(".block-in-div").click(function() { 
    cancelBg(); 
    $(this).css("background", getRandomColor()); 
});}); 

：

$(document).ready(function() { 
$(".block-in-div").click(function() { 
    var state = 1; 
    return function() { 
     cancelBg(); 
     if(state===1){ 
      $(this).css("background", getRandomColor()); 
      state=2; 
     } 
     else if(state===2){ 
      /*$(this).addClass("active");*/ 
      state=1; 
     } 
    }; 
}());}); 

単なるテスト用.active、それは単純です：

.active{ 
    height: 100vh; 
    width: 100vw; 
} 

助けてください！ あなたと一緒に力を発揮してください！ :)

Answer 1

これは、divを最初にクリックしたときにクラスを追加することで実現できます。あなたが他のdivのクリックで状態をリセットする必要がある場合は

$(document).ready(function() { 
    $(".block-in-div").click(function() {   
     return function() { 
      cancelBg(); 
      if(!$(this).hasClass('not-resized')) { 
       $(this).css("background", getRandomColor()); 
       $(this).addClass('not-resized'); 
      } 
      else if ($(this).hasClass('not-resized')) { 
       $(this).addClass("active"); 
       $(this).removeClass('not-resized'); 
      } 
     }; 
    }()); 
}); 

あなただけの$を追加することができますremoveClass（ '-リサイズない'）（ "ブロック・イン・DIVを。"）;最後に。

注1：アクティブクラスを追加すると、元のクラスのサイズよりも優先度が低くなります（変更を確認するための一時的な修正として重要なものを追加...より強力なセレクタを作成します）。

注2：要件を正しく取得できなかった場合は、教えてください。

Answer 2

ありがとうございました！ JSFiddle

$(document).ready(function() { 
$(".block-in-div").click(function() { 
    if($(this).hasClass('tofull') && !$(this).hasClass('active')){ 
     $(this).addClass("active"); 
    } 
    else if($(this).hasClass('active')){ 
     $(this).removeClass("active tofull"); 
     $(this).css("background", "none"); 
    } 
    else{ 
     cancelBg(); 
     let clr = "#"+((1<<24) * Math.random()|0).toString(16); 
     $(this).css("background", clr); 
     $(this).addClass("noColor tofull"); 
    } 
}); 

}）のような 金型の何か。

まだ作業に問題がありますが、問題を解決する方法があります。 問題：ブロックA（赤くなる）をクリックし、B（黄色）をクリックし、C（緑色）をクリックして、Aを再度クリックしてサイズ変更を行います。背景はなし