Javascript 选择第一个div后更改div的图标颜色

我拥有的：单击后，div将更改颜色。

我想做什么：第一次点击会改变背景（我做了），但第二次点击只会改变其他分区的图标颜色。

因此，如果我在任何div中单击

首先将更改背景颜色（我已更改）

second如果我点击其他任何一个图标，图标颜色将发生变化

同样，我希望在第二次单击后，向我显示一个警告，上面写着“您可以同时选择2个div”

我对js和jquery非常陌生，这是我能做到的最大限度

html:

<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 

$(document).ready(function () {
    var $box = $('.box').mousedown(function () {
        $(this).toggleClass('highlight');
        var flag = $(this).hasClass('highlight')
        $box.on('mouseenter.highlight', function () {
            $(this).toggleClass('highlight', flag);
        });
    });
    $(document).mouseup(function () {
        $box.off('mouseenter.highlight')
    })
});

.box {
    float: left;
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    margin-right: 10px;
}
.highlight {
    background: #0000FF;
}

.fa-trash {
  color:red;
}

.fa-trash{
  color:green;
}

css:

<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div>
<div class="box"><i class="fa fa-lg fa-trash"></i></div> 

$(document).ready(function () {
    var $box = $('.box').mousedown(function () {
        $(this).toggleClass('highlight');
        var flag = $(this).hasClass('highlight')
        $box.on('mouseenter.highlight', function () {
            $(this).toggleClass('highlight', flag);
        });
    });
    $(document).mouseup(function () {
        $box.off('mouseenter.highlight')
    })
});

.box {
    float: left;
    height: 100px;
    width: 100px;
    border: 1px solid #000;
    margin-right: 10px;
}
.highlight {
    background: #0000FF;
}

.fa-trash {
  color:red;
}

.fa-trash{
  color:green;
}

这是我的代码：

.盒子{
浮动：左；
高度：100px；
宽度：100px；
边框：1px实心#000；
右边距：10px；
}
.亮点{
背景：#0000FF；
}
垃圾{
颜色：红色；
}
垃圾{
颜色：绿色；
}
$（文档）.ready（函数（）{
var标志=假；
var$box=$（'.box'）.mousedown（函数（）{
$（this.toggleClass（'highlight'）；
if（flag）$（'.fa trash'）.css（'color'，'black'）；
flag=$（this.hasClass（'highlight'））
$box.on（'mouseenter.highlight'，函数（）{
$（this.toggleClass（'highlight'，标志）；
});
});
$（文档）.mouseup（函数（）{
$box.off（'mouseenter.highlight'）
})
});

---

试试这个

试试这个脚本，只需做一个带有true和false的标志，也许就能解决你的问题

$（文档）.ready（函数（）{
var click=false；
$（文档）.on（'单击'，'.box'，函数（）{
if（$（this）.hasClass（'highlight'））{
$（this.removeClass（'highlight'）；
单击=false；
返回false；
}
如果（！单击）{
$（this.find（“i”）.removeClass（“红色”）；
$（this.addClass（'highlight'）；
单击=真；
}否则{
$（this.find（“i”）.toggleClass（“红色”）；
}
});
});
.box{
浮动：左；
高度：100px；
宽度：100px；
边框：1px实心#000；
右边距：10px；
}
.亮点{
背景：#0000FF；
}
.fa-trash.red{
颜色：红色；
}
垃圾{
颜色：绿色；
}

图标颜色在这里意味着什么？我使用了一个垃圾桶作为示例，但将是另一个图标，将意味着一个文档正在被比较理解逻辑：），谢谢你。谢谢你的回答，但是唯一一个假设改变颜色的图标是被点击的图标，现在正在全部改变。背景色supose不仅仅改变了点击图标的图标颜色，我还想在第二次点击后看到一条消息，说用户在取消选择所选div之前不能再点击阻止点击。谢谢你的帮助。我要找的是尼斯：），谢谢，但是当图标变为红色时，第二次单击后会显示一条消息，说明不能选择2个以上，我该怎么办？可能吗？