Question

我使用一个网页，我希望用每个链接包含的onclick修改后的src链接替换一堆链接的<img>。

例如，Greasemonkey脚本应该改变它：

<p class="listphotos">
    <a onclick="alert('I'm a really annoying function! X'); return false;" href="#">
        <img alt="photo" src="http://.../min/x.jpg">
    </a>
    <a onclick="alert('I'm a really annoying function! Y'); return false;" href="#">
        <img alt="photo" src="http://.../min/y.jpg">
    </a>
</p>

对此：

<p class="listphotos">
    <a onclick="http://.../max/x.jpg" href="http://.../max/x.jpg">
        <img alt="photo" src="http://.../min/x.jpg">
    </a>
    <a onclick="http://.../max/y.jpg" href="http://.../max/y.jpg">
        <img alt="photo" src="http://.../min/y.jpg">
    </a>
</p>

我已尝试过此操作（另见this jsFiddle）：

var link = $("p.listphotos a img").prop("src").replace("min", "max");

$("p.listphotos a").prop("onclick", link);
$("p.listphotos a").prop("href", link);

但正确的图片无法链接。

Answer 1

将onclick设置为链接是一个错误。 onclick需要有效的javascript。但是，由于您似乎想要“脱墨”这些照片，最好完全删除onclick。

此外，您无法以这种方式设置href（除非您希望每个链接都转到同一张照片）。你需要循环。 jQuery的.each()应该可以解决问题。像这样：

$("p.listphotos a img").each ( function () {
    //-- `this` is each target image, one at a time
    var jThis   = $(this);
    //-- More robust replace
    var bigLink = jThis.prop ("src").replace (/\bmin\b/i, "max");

    //-- The img parent is the link we're after.
    jThis.parent ().prop ("href", bigLink).removeProp ("onclick");
} );

请注意prop and removeProp are the correct way to kill an onclick。但是，如果您在某些浏览器中检查页面源，该属性仍将存在。别担心，onclick将不再起作用。

Answer 2

我认为你可以尝试这样的事情

var numberClick=0;
var Images= ['image1.png','image2.png'];

function changeIndex(index){
   if (index >=0 && index < Images.length){   
      $("p.listphotos a img").attr("src", Images[index]);
      return true;
   }
   return false;
}

然后你可以这样使用它

function showImage(){
     if (changeIndex(numberClick)){
        numberClick+=1;
     }
     else{
        numberClick=0;
     }
}

然后

$("p.listphotos a img").click(function(){
   showImage();
   return false;
 });

用img src链接替换每个页面的onclick？

2 个答案: