Javascript 正在复制字符

在前面的一个问题中，我问过是否有可能单独设计一个角色的一半。反应是惊人的，有许多伟大的解决办法。您可以看到问题

我现在正试图利用这一点，做一些更先进的事情

我正在努力实现的目标：

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

.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;
}

$(".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>');
});

• 我试图替换文本中的所有“A”，并将它们替换为“V”
• 一旦A变成V，我就把V旋转180度
• V将基本上变成/\

我遇到的问题：

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

.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;
}

$(".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>');
});

• 由于某些原因，正在复制应用了“半样式”的字符

您可以看到一个正在工作的JSFIDLE

HTML:

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

.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;
}

$(".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>');
});

JQuery:

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

.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;
}

$(".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>');
});

$（“.text”）。每个（函数（）{
var text=$（this.text（）；
var flipped=text.split（'A'）。join（'V'）；
$（this.html）（翻转）
});
var textToHalfStyle=$（'.textToHalfStyle'）.text（）；
var textToHalfStyleChars=textToHalfStyle.split（“”）；
$（'.textToHalfStyle'）.html（''）；
$.each（textToHalfStyleChars，函数（i，v）{
$（'.textToHalfStyle'）。追加（''+v+''）；
});

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

---

提前感谢！：）

您将

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>');
});

var textToHalfStyle=$（'.textToHalfStyle'）.text（）；
var textToHalfStyleChars=textToHalfStyle.split（“”）；
$（'.textToHalfStyle'）.empty（）；
$.each（textToHalfStyleChars，函数（i，v）{
$（'.textToHalfStyle'）.eq（i）.append（''+v+''）；
});

---

这是您自己的更新版本

给出

textToHalfStyle=“vv”

，这就是字符重复的原因

相反，我创建了一个数组

var textToHalfStyle = $('.textToHalfStyle').toArray();

---

这解决了上次

中的问题
您
追加了
，但您应该替换为，例如
html
：

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

$。每个（textToHalfStyleChars，函数（i，v）{
$（'.textToHalfStyle'）.html（''+v+''）；
});
几乎一半的解决方案：只需注意：希腊语大写字母Lamda
λ
看起来像一个颠倒的V，我实际上用jquery将a替换为您提供的符号，并删掉所有代码以翻转V。尽管我同意Sharky的评论，这是最准确地解决了这个问题的答案，对我来说非常有效。