元素前后字符串的字符选取与修改
有需求需要选择某个符号前后的字符串，然后通过事件来操作前后单词的首字母或者最后一个字母的样式
详见www.lianxi.ieduchina.com中的五步精听，代码太多就不贴了。
demo如下
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div>
<span>我的女神JFla</span>
<i class=”aaa”>按钮</i>
<i>他唱歌的样子美极了</i>
<i class=”aaa”>按钮</i>
<i>我的女神JFla</i>
<br>
</div>
<div>
<span>我的女神JFla</span>
<i class=”aaa”>按钮</i>
<i>他唱歌的样子美极了</i>
<i class=”aaa”>按钮</i>
<i>我的女神JFla</i>
<br>
</div>
<script src=”jquery.min.js”></script>
<script>
window.onload = function () {
$(“body”).on(“click”, “.aaa”, function () {
var that = $(this)
dianji(that)
})
for (var i = 0; i < $(“.aaa”).length; i++) {
tegColor_red($(“.aaa”).eq(i))
}
var pro,
next,
newPro2,
newPro1,
newnext1,
newnext2,
flag = true;;
function dianji(that){
that.prev().children(“.top:last”).addClass(“red”);
that.next().children(“.top:first”).addClass(“red”);
}
function tegColor_red(that) {
pro = that.prev().text();
next = that.next().text();
newPro3 = “<span class=’top’>” + pro.substring(pro.length – 1) + “</span>”
newPro2 = “<span >” + pro.substring(1,pro.length – 1) + “</span>”
newPro1 = “<span class=’top’>” + pro.substring(0, 1) + “</span>”
newnext1 = “<span class=’top’>” + next.substring(0, 1) + “</span>”
newnext2 = “<span>” + next.substring(1, next.length – 1) + “</span>”
newnext3 = “<span class=’top’>” + next.substring(next.length – 1) + “</span>”
that.prev().html(newPro1 + newPro2 + newPro3)
that.next().html(newnext1 + newnext2 + newPro3)
return
}
//选择其他不变色
function tegColor(that) {
pro = that.prev().text();
next = that.next().text();
newPro2 = “<span class=”>” + pro.substring(pro.length – 1) + “</span>”
newPro1 = “<span>” + pro.substring(0, pro.length – 1) + “</span>”
newnext1 = “<span class=”>” + next.substring(0, 1) + “</span>”
newnext2 = “<span>” + next.substring(1, next.length) + “</span>”
that.prev().html(newPro1 + newPro2)
that.next().html(newnext1 + newnext2)
return
}
}
</script>
</body>
</html>
版权声明：本文为victory11114原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。