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

Question

我想使用 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。这可能吗？

Answer 1

您可以使用以下内容取出图像名称的“.jpg”部分，这将允许您在获得的名称之后删除任何扩展名：

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

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

Answer 2

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

var image = 'something_unusual.jpg';

您可以像这样获取图像名称：

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

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

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

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

Answer 3

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

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

Answer 4

由于扩展名将是：

• .jpg
• .png
• .gif

您可以使用 substring 在末尾剪切四个字符并添加到标题中。

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

Answer 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/