根据每个图像名称添加带有 jquery 的标题标签答案

【问题标题】：Add a title tag with jquery based on each image name根据每个图像名称添加带有 jquery 的标题标签
【发布时间】：2013-04-16 15:45:26
【问题描述】：

我想使用 jquery 为类 ls-thumb-active 添加一个标题标签，我用这个来做到这一点：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
tooltip = "mouseover";

$('.ls-thumb-active').attr('title', tooltip);

$('.displaytitle').html($('.ls-thumb-active').attr('title'));
});//]]>  

</script>

问题是，我希望它显示实际的 img 名称作为工具提示变量，最后没有 .jpg。这可能吗？

【问题讨论】：

标签： jquery title

【解决方案1】：

您可以使用以下内容取出图像名称的“.jpg”部分，这样您就可以去除所获得的名称之后的任何扩展名：

var imageName = imageElementYouAreGettingSomewhere.src;
imageName = imageName.substr(0, imageName.lastIndexOf('.'));

$('.displaytitle').attr('title', imageName );

【讨论】：

【解决方案2】：

您可以通过“拆分”您的 img 名称轻松地做到这一点。因此，假设 var image 是您的图像名称，如下所示：

var image = 'something_unusual.jpg';

你可以这样获取图片名称：

var image_name = image.split('.')[0];

然后，当然，您可以像第一次一样添加它：

$('.ls-thumb-active').attr('title', image_name);

请注意，我使用“split”方法，该方法将您的图像名称按字符“.”拆分。所以如果图像，由于某种原因，作为“。”以他的名义，这可能会破裂。您还可以使用最后一个点的索引进行子串、拼接等。但是在那个例子中，如果图像名称中没有点，那么无论文件扩展名是什么，它都会完美地工作。希望这会有所帮助。

【讨论】：

如果图片名称有.怎么办？说new.image.jpg。这行不通。 ps：我删除了反对票！
他感谢您删除了反对票。如您所见，我一发布答案就自己想到了。 substr 非常适合，取最后一个点的索引。或者你可以 .split('.')，然后是 '.pop()'（删除最后一个数组元素），然后是 '.join('.')'！那就是我喜欢javascript！有一百万种解决方案可用；）

【解决方案3】：

由于每个图像都需要这样做，因此您需要遍历所有图像并设置title 属性。

$('.ls-thumb-active').each(function() {
    var imgName = $(this).attr('src').split('.')[0];
    $(this).attr('title', imgName );
});

【讨论】：

您甚至可以只使用attr 来做到这一点。看看什么时候使用each，因为它是一个代价高昂的函数。

【解决方案4】：

因为扩展名是：

.jpg
.png
.gif

您可以使用子字符串将末尾的四个字符剪切并添加到标题中。

$('.ls-thumb-active').attr('title', substr(tooltip, 0, strlen(tooltip) - 4));

【讨论】：

我认为在点字符“。”上使用拆分方法会更安全。并删除获得的数组的最后一部分
如果扩展名是.jpeg 怎么办？
呵呵……没想到！

【解决方案5】：

使用此代码：

<script type='text/javascript'>
jQuery(document).ready(function($) {
    tooltip = "mouseover";
    thumActive = $('.ls-thumb-active'); // Cached object
    // Get the source name of the image
    thumbImageSrc = $('.target-of-the-image').attr("src");
    // To slice from the last '/' if there is no '/' then slice from the very start
    thumbImageNameFirstSlice = ( thumbImageSrc.lastIndexOf( '/' ) ? thumbImageSrc.lastIndexOf( '/' ) + 1 : 0 );
    // And will slice to the last '.'
    thumbImageName = thumbImageSrc.slice( thumbImageNameFirstSlice, thumbImageSrc.lastIndexOf( '.' ) );
    // Your code =)
    thumActive.attr('title', tooltip);
    // Assign the name to the '.displaytitle'
    $('.displaytitle').html( thumbImageName );
});
</script>

有一个jsFiddle：http://jsfiddle.net/Np6FG/1/

【讨论】：