javascript - 两次点击 - 不同的 Action (相同的 div)

Question

希望有人能帮忙!我有一些 div(使用 Bootstrap )，例如:

<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 应该得到它的随机背景。有了这个问题，一切就都清楚了。

我不知道下一步该怎么做:我点击了 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 时添加一个类来实现这一点。

$(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');
            }
        };
    }());
});

如果您需要在点击其他 div 时重置状态，您可以添加 $(".block-in-div").removeClass('not-resized');在最后。

注意 1:像您一样添加事件类的优先级将低于原始类的大小(添加一个 !important 作为临时修复以查看更改或什至更好......制作更强大的选择器)。

注2:如果我没有得到正确的要求，请。告诉我。