使用jQuery添加標題標籤基於每個圖像名稱

我想使用jQuery標題標籤添加到類LS-拇指主動，我這一點，得到了到：使用jQuery添加標題標籤基於每個圖像名稱

<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。這可能嗎？

來源

2013-04-16 roje0913

由於擴展是兩種：

的.jpg
png格式
.gif注意：

您可以使用子末削減四個大字，並加入到標題。

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

來源

2013-04-16 15:47:21

我認爲這將是更安全的使用上一點性格分裂法「」並刪除獲得的數組的最後部分 – AnthonyLeGovic

如果擴展名是'.jpeg'，該怎麼辦？ – DarkAjax

哈哈...沒有想到它！ –

您可以通過「分割」您的img名稱輕鬆完成此操作。所以我們說了var形象是你的形象的名字，像這樣：

var image = 'something_unusual.jpg';

你可以得到圖像名稱如下：

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

然後，當然，你添加它以同樣的方式你做第一個：

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

請注意，我使用的方法「拆分」，它分裂你的形象名稱的caracter「。」。所以如果圖像出於某種原因被視爲「。」以他的名義，這可能會打破。您也可以使用最後一個點的索引來進行子串，拼接等。但是在這個例子中，如果圖像名稱中沒有點，那麼無論文件擴展名是什麼，它都可以很好地工作。希望這有助於。

來源

2013-04-16 15:48:36 Bene

如果圖像名稱有「。」，該怎麼辦？說'new.image.jpg'。這不起作用。 * ps：我刪除了downvote！* –

hehe感謝您刪除downvote。正如你所看到的，當我發佈答案時，我自己就想到了它。 substr會很好地符合最後一個點的索引。或者你可以.split（'。'），然後'.pop（）'（刪除最後一個數組元素），然後'.join（'。'）'！這就是我喜歡的JavaScript！有一百萬個解決方案可用;） – Bene

你可以拿出的東西，如下面的圖像名稱的「.JPG」的一部分，這將讓你的什麼名字剝離後的任何擴展你得到：

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

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

來源

2013-04-16 15:50:38

由於這是每個圖像都需要的，您需要遍歷所有圖像並設置title屬性。

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

來源

2013-04-16 15:51:04

你甚至可以用'attr'來做到這一點。查看何時使用「每個」，因爲它是一個昂貴的功能。 –

是的，沒有必要循環... –

使用此代碼：

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

來源

2013-04-16 16:01:06

使用jQuery添加標題標籤基於每個圖像名稱

回答

相關問題