我想在单击按钮时将段落中一些随机字符的颜色更改为红色。请找到我的代码。我在这里有一些错误。
$('input').click(function(){
var para = $('#para');
var position = Math.floor(Math.random()*100);
var character = [];
var i=0
while ( i <= 30 )
{
character[i] = para.html().substr(position*(i+1), 1);
i++;
}
$.each(character, function() {
character.css('color','red');
});
});
首先,我创建了一个数组,其中包含一个段落中的30个随机字母接下来,我使用each()
迭代数组中的每个元素以应用css属性。但是控制台窗口弹出错误提示对象没有方法'css'
我做错了什么?
首先,CSS方法只能在jquery对象上工作。字符数组中有字符串。CSS方法不能处理字符串
第二,你的每个方法都写错了。应该是这样的
$.each(character, function(index, value) {
// Do something
});
对于你的问题语句,改变字符串中一些随机字符的颜色。这里是小提琴。
代码如下:
$('input').click(function(){
var para = $('#para');
var charArray = $('span', para);
// case: No span (Initial String)
if (charArray.length === 0) {
var html = para.html();
var newArr = [];
var len = html.length;
for (var i=0; i<len; i++) {
newArr.push('<span>' + html[i] + '</span>');
}
html = newArr.join('');
para.html(html);
charArray = $('span', para);
}
// Reset all spans
$.each(charArray, function(i, value) {
value.style.color = '';
});
var paralen = charArray.length;
for (var i=0; i<30; i++) {
var pos = Math.floor(Math.random()*100);
pos = pos % paralen;
charArray[pos].style.color = 'red';
}
});
您需要查看$.each的文档。一个可能的解决方案:
$('input').click(function() {
var $para = $('#para');
var position = Math.floor(Math.random()*100);
var character = [];
for ( var i=0; i <= 30; i++ ) {
character[i] = $("<span>" + $para.text().substr(position*(i+1), 1)
+ "</span>");
character[i].css('color', 'red');
}
$para.empty();
$.each(character, function(idx, val) {
$(val).appendTo($para);
});
});