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

爱被打了一巴掌 2022-09-26 15:50 183阅读 0赞

先放上代码

定义一个`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标准库][JavaScript]  
[slice][]  
[sbustr][]

[JavaScript]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
[slice]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice
[sbustr]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/substr