html span元素的Css可以在桌面上工作，但不能在移动的上工作,元素是使用jquery.append()添加的

k0pti3hp 于 2023-10-14 发布在 jQuery

关注(0)|答案(2)|浏览(168)

就像问题所说的那样。
我只能把html/脚本在有限的地方（没有直接访问html或源文件），所以我在一个简短的脚本添加评级。
它的意思是显示3辣椒，并根据评级，他们都将是红色或一些红色，一些白色。它在桌面版上运行得很好，但在移动的版上，它把所有图标都显示为红色，而且不能显示雪白色的css。有人知道为什么吗？

var spicyRating3 = "<span class='chilli-red'>&#127798; &#127798; &#127798;</span>";
var spicyRating2 = "<span class='chilli-red'>&#127798; &#127798;</span><span class='chilli-white'>&#127798;</span>";
var spicyRating1 = "<span class='chilli-red'>&#127798;</span><span class='chilli-white'>&#127798; &#127798;</span>";
$(".rating-3").append(spicyRating3);
$(".rating-2").append(spicyRating2);
$(".rating-1").append(spicyRating1);

body {
  background-color: lightblue;
}
.agenda .chilli-red {
  color: #ff0000;
}
.agenda .chilli-white {
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<p class="rating-3"></p>
<p class="rating-2"></p>
<p class="rating-1"></p>

桌面（外观）x1c 0d1x
移动的（应该只显示一个辣椒，但都是红色/不工作）

Html

来源：https://stackoverflow.com/questions/77233608/css-for-a-span-element-works-on-desktop-but-not-mobile-element-is-added-using-j

2条答案

按热度按时间

gg0vcinb1#

使用透明的颜色加上白色的文本阴影来渲染白色辣椒。

var spicyRating3 = "<span class='chilli-red'>&#127798; &#127798; &#127798;</span>";
var spicyRating2 = "<span class='chilli-red'>&#127798; &#127798;</span><span class='chilli-white'>&#127798;</span>";
var spicyRating1 = "<span class='chilli-red'>&#127798;</span><span class='chilli-white'>&#127798; &#127798;</span>";
document.querySelector(".rating-3").innerHTML = spicyRating3;
document.querySelector(".rating-2").innerHTML = spicyRating2;
document.querySelector(".rating-1").innerHTML = spicyRating1;

body {
  background-color: lightblue;
}
.chilli-white {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}

<p class="rating-3"></p>
<p class="rating-2"></p>
<p class="rating-1"></p>

或者使用SVG图像代替表情符号

var spicyRating3 = '<img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-red.svg">';
var spicyRating2 = '<img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-white.svg">';
var spicyRating1 = '<img src="https://donald.au/bugs/so-77233608/chilli-red.svg"><img src="https://donald.au/bugs/so-77233608/chilli-white.svg"><img src="https://donald.au/bugs/so-77233608/chilli-white.svg">';
document.querySelector(".rating-3").innerHTML = spicyRating3;
document.querySelector(".rating-2").innerHTML = spicyRating2;
document.querySelector(".rating-1").innerHTML = spicyRating1;

body {
  background-color: lightblue;
}
p.rating-1 img, p.rating-2 img, p.rating-3 img {
  width: 30px;
}

<p class="rating-3"></p>
<p class="rating-2"></p>
<p class="rating-1"></p>

展开查看全部

赞(0）回复(0）举报 2023-10-14

bttbmeg02#

更新css到下面，它现在可以按要求工作-在这里解释Color for Unicode Emoji感谢菲尔的链接

.agenda .chilli-red {
  color: transparent;
  text-shadow: 0 0 0 #ff0000;
}
.agenda .chilli-white {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}

赞(0）回复(0）举报 2023-10-14

我来回答

html span元素的Css可以在桌面上工作，但不能在移动的上工作,元素是使用jquery.append()添加的

2条答案

相关问题

热门标签

最新问答