JavaScript的字符串中添加变量

JavaScript的字符串中添加变量,第1张

js太麻烦了,涉及怎么传i进去函数里面,找了好久资料才找着,最好用还是jq我下面提供的资料都有,,隐藏的是jq实现的,你可以复制到你本地看看。。。

具体js实现后的隐培效果如下:

然后丛携拆代码如下:

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

*{

margin:0

padding:0

}

body{

font:normal 1em Arial, Helvetica, sans-serif

margin:0

padding:0

}

a{ text-decoration:nonecolor:black}

a:hover{ text-decoration:underlinecolor:red}

#ull li{ border:1px solid red}

.navHover{ background:#aaa}

.navHover0{ background:#99F}

.navHover1{ background:#ccc}

.navHover2{ background:#f00}

.navHover3{ background:#ff0}

.navHover4{ background:#99d}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

  </head>

<body>

<ul id="ull">渗枣

      <li>123</li>

          <li>123</li>

          <li>123</li>

          <li>123</li>

          <li>123</li>

      </ul>

<script language="javascript">

var wLi = document.getElementById("ull").getElementsByTagName("li")

for(var i = 0i <wLi.lengthi++){

wLi[i].onmouseover = function(i){

return function(){

this.className = "navHover" + i

}

}(i)

wLi[i].onmouseout = function(){

this.className = ""

}

}

// $(document).ready(function(){

// $("#ull li").hover(function(){

// var index = $("#ull li").index(this)

// $(this).addClass("navHover" + index)

// },function(){

// $(this).removeClass()

// })

//

// })

</script>

</body>

</html>

思路:获取变量→使用字符串拼接符号(+)拼接字符串。下面实例演示:从文本局轿框获取两个字符串变量,拼接后输出到另一个文本框。

1、HTML结构

变量1:<input type="text" id="test1"/><br>

变量2:<input type="text" id="test2"/><br>

拼接 :<input type="text" id="test"/>激毕

<input type='button' value='拼接' onclick="fun()"/>

2、javascript代码

function fun(){

var str1 = document.getElementById("test1").value

var str2 = document.getElementById("test2").value

var str = str1 + " " +str2

document.getElementById("明腊芹test").value = str

}

3、效果演示

//es6中可以使用模板字符串。

var str ="字符串变芹昌量"

var s = `你好,这掘首游判销是${str}`

// es5中可以使用+拼接

var s = "你好,这是"+str+",这里使用es5的字符串拼接方式。"


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11983112.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存