Question

在上一个问题中，我曾询问是否可以单独设置一半角色。回应令人惊讶，并找到了许多出色的解决方案。您可以看到问题 HERE 。

我现在正试图利用它并做更先进的事情。

我想要完成的任务：

我正在尝试替换文本中的所有＆＃34; A＆＃34;并将其替换为＆＃34; V＆＃34;
一旦A已经成为V，我就会将V的旋转180度。
V将基本上成为/ \。

我遇到的问题：

出于某种原因，正在复制具有＆＃34; HalfStyle＆＃34;的字符。适用于他们。

您可以看到正常工作的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--

Answer 2

在您的$each append html中，您应该替换为$.each(textToHalfStyleChars, function(i,v){ $('.textToHalfStyle').html('<span class="halfStyle" data-content="' + v + '">' + v + '</span>'); }); {{1}}：

{{1}}

Answer 3

以下是您自己的demo

的更新版本

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

给出textToHalfStyle="vv"这就是字符重复的原因。

相反，我用

创建了一个数组

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

解决了这个问题

字符正在重复

3 个答案:

--DEMO--