jquery - 通过文本检测更改图像源

Question

我目前正在开发一个显示Flickr内容的图形覆盖应用程序。

我想替换已选择退出的用户的图像。

我的html结构如下：

<ul>
  <li>
    <div class="imgbk">
      <img src='http://farm6.static.flickr.com/5312/7057785005_2966a34f1f.jpg'/>
      <a href='http://www.flickr.com/photos/85152114@N00/7057785005'>Link</a>
    </div>
  </li>
</ul>

本例中要测试的字符串85152114@N00位于href中。

href 结构始终相同：flickr.com/photos/userID/ImageID

到目前为止，这是在服务器端完成的，但是我网站上的巨大流量迫使我在客户端做。我的jQuery知识有限，所以我寻求帮助！

Answer 1

不完全确定您在寻找什么。但是，如果您想获取该字符串，可以执行以下操作：

var a = $('.imgbk a').attr('href');
var b = a.split('/');
alert(b[4]);

示例：http: //jsfiddle.net/jasongennaro/AQw9X/

基本上，找到 href 属性，然后将其划分为/，将每个部分放在一个名为 的数组中b。我已经提醒了结果，因此您可以看到要选择数组中的哪个项目，但是您可以从那里做任何您想做的事情。

Answer 2

如果您正在寻找一种方法来检查页面中的所有图像以查找包含该特定代码的任何项目，您可以这样做；

var optOutstr = "85152114@N00";

$(img).each(function() {
   if (this.href.match(new RegExp("/" + optOutStr + "/")) {
       this.href = "whatever you want to replace the URL with";
       $(this).prev().attr("src", "whatever you want to replace the image with");
   }
});

如果您有要检查的完整代码列表，那么将有更有效的方法来检查一大堆代码。

var optOutMap = {"85152114@N00": true, ....};

$(img).each(function() {
   var matches = this.href.match(/flickr.com\/photos\/([^\/]+)\//);
   if (matches && matches[1] in optOutMap) {
       this.href = "whatever you want to replace the URL with";
       $(this).prev().attr("src", "whatever you want to replace the image with");
   }
});

Answer 3

谢谢大家，这是我根据您的回答编写的新代码：

var OptOutArray = ["85152114@N00", "00000000@N00"];

$('img').each(function() {
  var matches = $(this).next().attr("href").split('/')[4];
  if ($.inArray(matches, OptOutArray) > -1) {
    $(this).attr("src", "http://core.flickeflu.com/doh.gif");
  }
});​

这里的例子：http: //jsfiddle.net/jgYs8/