Question

我正在尝试将Twitter小部件徽标替换为我指定的徽标。我怎么能这样做，请注意twitter标识上没有ID或类，所以我不确定如何进行替换，它可能需要循环遍历每个图像然后只替换那个匹配。

示例..

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('twitter').start();
</script>

上面是我正在使用的Twitter代码，它呈现了twitter徽标，网址为http://widgets.twimg.com/i/widget-logo.png，我需要将其更改为/image/twitter.jpg。

Answer 1

使用jQuery：找到source属性设置为twitter徽标的图像，并将src属性替换为图像的相对url：

$("img[src='http://widgets.twimg.com/i/widget-logo.png']").attr("src","/image/twitter.jpg");

Answer 2

你可以使用属性测试（因为它是元素的特定信息），如果严格相等：

var logoTwitter = $('img[src="http://widgets.twimg.com/i/widget-logo.png"]');

如果图片网址不是那么一致（可能是某个部分是可变的），您可以测试结尾：

var logoTwitter = $('img[src$="/widget-logo.png"]');

检查这些选择器：http://api.jquery.com/category/selectors/

Answer 3

一种选择是使用选择器找到带有徽标的属性。这可以使用选择器$('div.twtr-ft a[href="http://twitter.com"] img')来定位标记，然后使用attr函数替换src属性。

我的问题是，对窗口小部件所做的更改可能会破坏您的代码。我选择使用主页作为选择器，因为它不太可能比图像的位置更改。 div.twtr-ft是可选的，但有助于防止对包含带图像的锚的窗口小部件的任何添加破坏代码。

JQuery / Javascript图像替换

3 个答案: