主页 / 问题 / 1216628
Accepted
Evgenii Kantemirov
Asked:2021-12-10 12:58:49 +0000 UTC2021-12-10 12:58:49 +0000 UTC

有许多具有已知id和相同类的div，您需要设置 ::after 伪元素的样式，以便伪元素的颜色不同

  • 772

有许多具有已知 ID 和相同类的 div。我们需要设置 ::after 伪元素的样式，以便每个伪元素的颜色不同。Jquery 或 JavaScript 中需要该解决方案。此代码错误地分配了样式

$(document).ready(function() {
$('#' + 1318735 + '.top-circle::after').css('background-image', 'radial-gradient(110% 100% at 50% 0%, rgba(0, 0, 0, 0) 50%, rgb(32, 178, 170) 51%, rgb(32, 178, 170) 0px');
});

此代码为伪元素创建样式，并且没有为具有给定 id 的 div 分配类。

$( "<style>.top-circle::after { background-image: radial-gradient(110% 100% at 50% 0%, rgba(0, 0, 0, 0) 50%, rgb(32, 178, 170) 51%, rgb(32, 178, 170) 0px); }</style>" ).appendTo( "#1318735" );

Divas 是在循环中生成的，因此不能为每个 div 分配单独的附加类。

<? foreach($arResult["ITEMS"] as $arItem):?>
<div id="<?= $arItem['ID']?>" class="top-circle akziya_img_wrapper akzii"><div>           
<?endforeach;?>

这是来自模板 1-s itrix 的片段

javascript

2 个回答

  1. 不能用 JS 或 JQ 操作伪元素，但可以使用CSS 变量

    例如：

    $('#item_'+Math.floor(Math.random() * 10)).css('--color-after', 'green'); // Изменяем значение переменной через функцию .css
    .item {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: gray;
  --color-after: red; /* Лучше всего "устанавливать" переменную CSS в правиле родителя */
}

.item::after {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--color-after); /* А применять её уже непосредственно в псевдоэлементе */
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="item_1" class="item"></div>
<div id="item_2" class="item"></div>
<div id="item_3" class="item"></div>
<div id="item_4" class="item"></div>
<div id="item_5" class="item"></div>
<div id="item_6" class="item"></div>
<div id="item_7" class="item"></div>
<div id="item_8" class="item"></div>
<div id="item_9" class="item"></div>
<div id="item_10" class="item"></div>

    • 3
  2. Best Answer

    选项$('#' + 1318735 + '.top-circle::after')不起作用，jQuery 选择器不适用于伪元素之后和之前

    第二个选项有效，但 id 不能以数字开头

    $(document).ready(function() {
$( "<style>#id1111111111111.top-circle::after { background-image: radial-gradient(110% 100% at 50% 0%, rgba(0, 0, 0, 0) 50%, rgb(32, 178, 170) 51%, rgb(32, 178, 170) 0px); }</style>" ).appendTo( "#id1111111111111" );
  });
    body{
  margin: 0;
  padding: 0;
  display: flex;
  box-sizing: border-box;
  background: blue;
  flex-wrap:wrap;
  flex: 1 0;
}

.akzii{
  width: 100px;
  height: 100px;
  margin: 10px;
  background: gray;
}
.akzii:after{
  content: '';
  display: block;
  width: 30px;
  height: 30px;
  background: red;
  transform: translate(-10px, -10px);
}
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<body>
<div id="id1111111111111" class="top-circle akziya_img_wrapper akzii"></div>
<div id="2222222222222" class="top-circle akziya_img_wrapper akzii"></div>
<div id="3333333333333" class="top-circle akziya_img_wrapper akzii"></div>
<div id="4444444444444" class="top-circle akziya_img_wrapper akzii"></div>
<div id="5555555555555" class="top-circle akziya_img_wrapper akzii"></div>
<div id="6666666666666" class="top-circle akziya_img_wrapper akzii"></div>
<div id="7777777777777" class="top-circle akziya_img_wrapper akzii"></div>
<div id="8888888888888" class="top-circle akziya_img_wrapper akzii"></div>
<div id="9999999999999" class="top-circle akziya_img_wrapper akzii"></div>
</body>

    • 2

相关问题