Использование jQuery для копирования значения из имени файла источника изображения для обработки и вставки в HTML? - PullRequest
Новая
       12

Использование jQuery для копирования значения из имени файла источника изображения для обработки и вставки в HTML?

1 голос
/ 21 мая 2009

Привет, я пытаюсь использовать jQuery / javascript, чтобы сделать мою жизнь проще. Я пытаюсь использовать его для автоматического заполнения различных HTML-элементов с именем места и страны, которая исходит из имени файла изображения. Ниже приведен пример HTML-кода, с которым мне нужно работать: 

<div class="boxgrid">
<a href="gallery/angkor - cambodia.jpg" title="[PLACE] - [COUNTRY]">
  <img src="gallery/thumbs/angkor - cambodia.jpg" alt="[PLACE] - [COUNTRY]" width="100" height="100"/>
</a>
  <div class="boxcaption">
    <span class="place">[PLACE]</span>
    <span class="country">[COUNTRY]</span>
  </div>
</div>

Представьте, что этот блок html повторяется несколько раз для каждого изображения в галерее, поэтому я предполагаю, что .each () нужно будет использовать.

Идея состоит в том, что [ИМЯ МЕСТА] и [ИМЯ СТРАНЫ] должны быть заполнены именем файла изображения с использованием - (тире) в качестве разделителя между двумя значениями. Как я могу сделать это с помощью jQuery / javascript? (я понимаю, что должен использовать язык на стороне сервера или пойти другим путем, но я ограничен этим)

В качестве бонуса первая буква каждого из значений должна быть заглавной, например, Ангкор - Камбоджа.

Спасибо, любая помощь будет высоко ценится.

1 Ответ

2 голосов
/ 21 мая 2009

Вот полный код с обрезкой и прописными буквами первой буквы для места и страны. 

String.prototype.capitalize = function(){
    return this.replace(/\S+/g, function(a){
        return a.charAt(0).toUpperCase() + a.slice(1).toLowerCase();
    });
};

$(function(){
 $('.boxgrid').each(function(){
    var placeCountry = $(this).find('img').attr('src')
                            .replace('gallery/thumbs/','')
                            .replace('.jpg','').capitalize();

    var place = $.trim(placeCountry.split('-')[0]); 
    var country = $.trim(placeCountry.split('-')[1]);
    $(this).find('a').attr('title',placeCountry);
    $(this).find('img').attr('alt',placeCountry);
    $(this).find('.place').html(place);
    $(this).find('.country').html(country);
 });
});
...