javascript - 字符被重复

Question

在上一个问题中，我曾询问是否可以单独设置半个角色的样式。反响非常惊人，并且找到了许多很棒的解决方案。您可以看到问题HERE 。

我现在正在尝试利用它并做一些更高级的事情。

我想要实现的目标:

• 我正在尝试将文本中的所有“A”替换为“V”
• 一旦 A 变成 V，我就会将 V 旋转 180 度。
• V 本质上会变成/\。

我遇到的问题:

• 由于某种原因，应用了“HalfStyle”的字符会被重复。

您可以看到正在运行的 JSFiddle HERE 。

HTML:

<div class="text"> MATT WAS HERE </div>

CSS:

.text{
font-size:100px;
font-family:"Arial", Helvetica, sans-serif;
font-weight:bold;
color: #0C5894;
}

#vflip {
margin:0;
padding:0;
display:inline-block;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
color:#ff0000;
}


.halfStyle {
position:relative;
display:inline-block;
width:1;
font-size:100px;
color: #0C5894;
overflow:hidden;
white-space: pre;
}

.halfStyle:before {
display:block;
z-index:1;
position:absolute;
top:0;
width: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
color: #6898BC;
}

JQuery:

$(".text").each(function() {
    var text = $(this).text();
    var flipped = text.split('A').join('<span class="textToHalfStyle" id="vflip">V</span>');
    $(this).html(flipped)
});

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').html('');
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

知道是什么原因造成的吗？

提前致谢! :)

Answer 1

您在每次迭代时将 span 附加到所有 .textToHalfStyle，您需要改为定位特定元素，此处使用 eq() jQuery的方法:

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').empty();
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').eq(i).append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});

--DEMO--