当进入dom时匹配img src的一部分并将一个类添加到;匹配的标签 - jquery

Question

我有一个 ajax 加载的图像库，它将图像加载到 dom，然后将其删除并加载到下一个图像中并以这种方式旋转。

在图像进入的位置旁边，我有一个图像的静态名称列表（它们在页面加载时存在，并且不执行任何操作）。

我想要做的是，当图像加载到 dom 中时，我想将其 src 属性的一部分与类/ id / rel / 列表中的任何名称相匹配。

期望的结果是，当图像显示时，它的名称会带有下划线，然后当它显示时，它的名称不再带有下划线，因为下一个图像名称现在已带有下划线......

我真的遇到了麻烦，如果有人可以显示我该怎么做我真的非常感激！

谢谢你！

Answer 1

您可以使用 jQuery 的 .load() 方法（更准确地说，图像的 load 事件，例如

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

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

您也可以在window 对象。当所有图像（作为副作用，它也会等待一些其他的东西，如iframes）被加载时，它就会被触发

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

。

Answer 2

没有所有复杂的正则表达式，您可以按照最初建议的方式使用 id/rel 属性。使用此方法，您将不会匹配图像 src 标签，而是匹配它的 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'ed 示例格式

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

这是加载图像时

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

，您可以使用 jquery 进行匹配现在可以执行以下操作现在带有 id item_image_6 的图像将与 p 标记匹配item_desc_6

对我来说给你确切的答案有点困难，因为我看不到你在内容中使用ajax的代码。

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');

/some regex/ 应该返回你想要匹配的部分