组件缩略图名称、图片路径自动生成

先放上代码

var OrderNum = {
init: function() {
var oLi = $('.show_content>li')
for(var i = 0; i < oLi.length; i++) {
var src = $(oLi[i]).attr('_src')
if(src) {
var arr = src.split('/');
//              console.log(arr)
var str = arr[arr.length - 1]
//              console.log(str)
var orderNum = str.slice(0, str.indexOf("."))
//              console.log(orderNum)
$(oLi[i]).
4000
html('<img src="images/' + orderNum + '.jpg"><h2>' + orderNum + '</h2><span class="Y-N"></span>')
}
}
}
};
OrderNum.init();

定义一个

orderNum

的类{

在这个类中定义一个

init

函数：{

定义一个变量

oLi

表示我们要获取的源位置

$('.show_content>li')

定义一个循环来获取所有（用

oLi.length

表示所有）的位置{

这里放上

<li>

的内容

<li _src="data/pc/hot/mould/QiYe_Mould/EOPAb001.html"></li>

定义变量

src

依次获取

li

的

_src

属性值

$(oLi[i]).attr('_src')

，获取到的结果是

data/pc/hot/mould/QiYe_Mould/EOPAb001.html

如果获取到的话将会继续执行{

对

src

使用

split()

方法，从

/

分隔字符串，存储进一个数组，定义这个数组为

arr

获取最后一个数组元素定义为

str

，此时的值为

EOPAb001.html

我们真正要用的是

EOPAb001

，所以使用

slice()

方法，获取从第0位到字符

'.'

的位置（用

str.indexOf(".")

方法获取）的字符

slice(0, str.indexOf("."))

就是

EOPAb001

，定义为变量

orderNum

最后一步就是给

<li>

中添加相应的html代码使用

$(oLi[i]).html

方法}}}}

最后的最后调用这个函数

OrderNum.init();

这里主要是想说明

split()

和

slice()

两个方法

与

slice()

方法类似的方法是

substr()

str.slice(beginSlice[, endSlice])
str.substr(start[, length])

附：

JavaScript标准库

slice

sbustr