Question

我有两个六边形div。我通过一些jQuery混淆了我创建一个函数，它将从两种颜色中随机选择以决定div的背景颜色。问题是，我还希望我的六边形的顶部和底部边框改变为它的身体的相应颜色。我使用：before和：after伪元素来创建我的六边形并且无法将我的函数应用于它们。任何帮助将不胜感激！

    $(document).ready(function() {
    var randomColors = ["#96281B","#F7CA18"];
    $(".hexagon").each(function(index) {
        var len = randomColors.length;
        var randomNum = Math.floor(Math.random()*len);
        $(this).css("backgroundColor",randomColors[randomNum]);
    });
});

这是一个JSFiddle来展示我已经拥有的东西：http://jsfiddle.net/k7eo7r1m/

Answer 1

为每种颜色设置CSS类名称可能更容易，然后只需将相应的类添加到六边形。

不幸的是，我不相信你可以改变'：after'元素的CSS，因为它们实际上并不存在于DOM中，因此你无法访问它。

编辑：这是fiddle

<强> JS：

$(document).ready(function() {
    var randomColors = ["","altColor"];
    $(".hexagon").each(function(index) {
        var len = randomColors.length;
        var randomNum = Math.floor(Math.random()*len);
        $(this).addClass(randomColors[randomNum]);
    });
});

<强> CSS：

.hexagon {
    position: relative;
    display: inline-block;
    width: 100px; 
    height: 57.74px;
    background-color: #F7CA18;
    margin: 28.87px 0;
    margin-right: 4px;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 28.87px solid #F7CA18;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 28.87px solid #F7CA18;
}

.altColor {
    background-color: #96281B;
}

.altColor:before {
    border-bottom: 28.87px solid #96281B;
}

.altColor:after {
    border-top: 28.87px solid #96281B;
}

EDIT2：我已经清理了CSS。

Answer 2

它适用于边框和背景的类名和颜色。请参阅http://jsfiddle.net/k7eo7r1m/10/。

$(document).ready(function() {
var randomColors = ["borderYellow","borderBrown"];
$(".hexagon").each(function(index) {
    var len = randomColors.length;
    var randomNum = Math.floor(Math.random()*len);
    // remove all other possible set color-classes
    // $(this).removeClass(randomColors.join(' ')); // optional, e.g. if you like to change colors at runtime
    // add a random new one
    $(this).addClass(randomColors[randomNum]);
});
});



/* colors */
.borderYellow{
    background-color: #F7CA18;
}
.borderYellow:before,
.borderYellow:after{
    border-color: #F7CA18;
 }
.borderBrown{
    background-color:#96281B;
}
.borderBrown:before,
.borderBrown:after{
    border-color: #96281B;
}
/* Boxes, Shapes ... */

Answer 3

创建新的其他样式动态。 Example

$.each(randomColors, function(_, color) {
    var className = getHexagonClassName(color);
    $('<style>.' +
      className + '{background-color:' + color + ';}.' +
      className + ':before{border-bottom-color:' + color + ';}.' +
      className + ':after{border-top-color:' + color + ';}</style>')
    .appendTo($('head'));
});

将相同的随机颜色更改应用于背景和边框

3 个答案: