作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的目的是改变段落中每个单词的颜色,平滑且一个接一个。
它可以工作,但出现子字符串会使它崩溃。我不太擅长 javascript,但这是我到目前为止所做的:
// GET WORDS LIST
var pText = $('p').text(); //Get the text of the concerned element
var pArray = pText.split(/\s/g); //Transform the string in an array
//Put values in a clean new array without spaces
var pClean = new Array();
var j = 0;
for (var i = 0; i < pArray.length; i++) {
if(pArray[i] != ''){
pClean[j] = pArray[i];
j++;
}
}
var pArray = []; //Delete the old one
//WRAP AND REPLACE WORDS
var i = 0;
setInterval( function () {
//stop the loop
if(pClean[i] == ''){
// I don't really ge how to use clearInterval for stopping the loop.
}
//replace words
if($('p').text().indexOf(pClean[i])){
$('p:contains("'+pClean[i]+'")').html(function(_, html) {
var replacement = '<span class="read">'+pClean[i]+'</span>';
return html.replace(pClean[i], replacement);
});
$('p .read:last').addClass('hlight'); //highlight the last
}
i++;
}, 300);
这是 jsfiddle .
这一定是一个更好的方法...感谢您的宝贵时间!
我应用了经过验证的答案的代码,它确实运行良好,但我也尝试在追加函数中添加异常,但没有成功。似乎没有检测到这个变量。
var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
if(this == '4.'){
$(p).append($('<br><span>'+v+'</span>'));
}
else {
$(p).append($("<span>").text(v)).append(" ");
}
});
//WRAP AND REPLACE WORDS
var i = 0;
setInterval( function () {
//stop the loop
if($('p :not(.read):first').length == 0){
}
$('p :not(.read):first').addClass("read");
//$("p .read").removeClass("hlight");
$("p .read:last").addClass("hlight");
}, 500);
你有什么想法吗?谢谢
最佳答案
如果你这样做呢,你从围绕每个单词开始,然后你可以一个一个地添加类。
var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
$("p").append($("<span>").text(v)).append(" ");
});
//WRAP AND REPLACE WORDS
var i = 0;
setInterval( function () {
//stop the loop
if($('p :not(.read):first').length == 0){
}
$('p :not(.read):first').addClass("read");
//$("p .read").removeClass("hlight");
$("p .read:last").addClass("hlight");
}, 500);
p{
color: black;
width: 200px;
margin: 100px auto 0 auto;
}
p .read{
color: black;
transition: color 1s ease-in-out 0.1s;
-webkit-transition: color 1s ease-in-out 0.1s;
}
p .read.hlight{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum dignissim, nisl nec laoreet hendrerit, tellus eros
tristique tortor, eu commodo nunc sem id erat. Aliquam erat
volutpat. Praesent ultrices quam justo, nec condimentum elit
imperdiet at. Duis a fringilla quam. Suspendisse condimentum
gravida volutpat.
</p>
关于javascript - 将子字符串替换为段落内的 html 元素,而不会使用 Jquery 弄乱事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27026013/
我是一名优秀的程序员,十分优秀!