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，它改变了它的颜色，我再次点击它会变得更大。

颜色随机发生器：

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：如果我没有得到正确的要求请。告诉我。

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 - 大小更改但没有背景

两次点击 - 不同的动作（相同的div）

2 个答案: