如何只映射图像源属性的一部分

Question

$('button').on('click', function(){
var str = $.map($('.bimg'), (e) => $(e).attr('src')).join(',');
console.log(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class='bimg' src='gall/lorem.jpg' alt='img'>
<img class='bimg' src='gall/ipsum.jpg' alt='img'>
<img class='bimg' src='gall/dolor.jpg' alt='img'>
<button>CLICK</button>

结果:

gall/lorem.jpg,gall/ipsum.jpg,gall/dolor.jpg

我需要什么:

lorem,ipsum,dolor

Answer 1

您可以使用regex从src获取图像名称。

$('button').on('click', function() {
var str = $.map($('.bimg'), (e) => $(e).attr('src').match(//(.*).jpg/)[1]).join(',')
console.log(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class='bimg' src='gall/lorem.jpg' alt='img'>
<img class='bimg' src='gall/ipsum.jpg' alt='img'>
<img class='bimg' src='gall/dolor.jpg' alt='img'>
<button>CLICK</button>

Answer 2

将以下内容添加到您的地图

.split('/').pop().split('.').shift()

所以我们把每个/分开，用pop()得到最后一个找到的

然后我们将拆分每个.并使用shift()来获得第一部分

$('button').on('click', function(){
var str = $.map($('.bimg'), (e) => $(e).attr('src').split('/').pop().split('.').shift()).join(',');
console.log(str);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class='bimg' src='gall/lorem.jpg' alt='img'>
<img class='bimg' src='gall/ipsum.jpg' alt='img'>
<img class='bimg' src='gall/dolor.jpg' alt='img'>
<button>CLICK</button>

lorem.jpg、ipsum.jpg dolor.jpg