Совпадает с частью img src, когда входит в dom, и добавляет класс к тегу <p>, который соответствует - jquery

Question

У меня есть галерея изображений, загруженная ajax, которая загружает изображение в dom, а затем удаляет его, загружает следующее и вращается таким образом.

Рядом с тем, куда входит изображение, у меня есть список статических имен (они присутствуют при загрузке страницы и ничего не делают) для изображений.

Что я хочу сделать, так как изображение загружается в dom, я хочу сопоставить часть его атрибута src с классом / id / rel / любым именем из списка.

Желаемый результат заключается в том, что при отображении изображения его имя подчеркивается, а затем, когда оно появляется, его имя больше не подчеркивается, поскольку имя следующего изображения теперь подчеркнуто ...

У меня есть настоящие проблемы с этим, если кто-нибудь может показать мне, как это сделать, я был бы действительно чертовски благодарен!

Спасибо!

Answer 1

Без всех сложных регулярных выражений в способе вы можете использовать атрибуты id / rel, как вы предложили изначально.С помощью этого метода вы не сопоставляете тег src images, но сопоставляете его атрибут ID.

Вот ваши описания

<p id="item_desc_5">Plane</p>
<p id="item_desc_6">Car</p>

Вот ваш класс CSS для подчеркивания

<style type="text/css">.underline { text-decoration: underline; }</style>

Вот пример фрейта ajax'а в

<img src="somepath.jpg" id="item_image_6" />

При загрузке вашего изображения и вы можете сопоставить это с jquery, вы можете сделать

<script type="text/javascript">
    jQuery(document).ready(function($) {
        var myImage = $('#some_image');
        var title = $('#item_desc_' + myImage.attr('id').replace('item_image_', ''));
        title.addClass('underline');
    });
</script>

Теперьизображение с идентификатором item_image_6 будет соответствовать тегу p с item_desc_6

Мне было немного сложно дать вам точный ответ, потому что я не мог видеть ваш код, который был ajaxing в контенте.

Answer 2

Вы можете использовать метод jQuerys .load() (точнее, load event для таких изображений, как

$('#imageid').load(function(){
   // image was loaded
   var mySrc = $(this).attr('src');

   if(mySrc.indexOf('some_string_identifier') > -1){
      $(this).addClass('underline');
   }
});

, вы также можете вызвать .load() на window object. Это срабатывает, когда все изображения(как побочный эффект, он также ожидает загрузки некоторых других вещей, таких как iframes).

$(window).load(function(){
});

И выполните проверку прямо здесь.

Answer 3

РЕДАКТИРОВАНИЕ - я бы сделал что-то вроде этого

$('#imageid').load(function(){
   // image was loaded
   part = /some regex/.exec($(this).attr('src'));
   if(part != null) $('p').filter('[src*="'+part+'"]').addClass('underline');
}).attr('src','new_src.jpg');

/ некоторые регулярные выражения / должны вернуть часть, которую вы хотите соответствовать