将Onclick函数转移到jQuery

Question

我有一个jQuery函数，可以用主图像替换缩略图。这是我用来替换主图像的代码：

$(document).ready(function(){
    $(".wheelFinishThumbs a").click(function() {
    var mainImage = $(this).attr("href");
    var mainTemp = mainImage.replace(/-mid/,'');
    var mainTemp = mainTemp.replace(/png/,'jpg');
    $("#main_view img").attr('src', mainImage );
    $("#main_view a").attr('href',mainTemp);
    return false;       
    });

我使用PHP函数通过更改图像的标题值来下载(保存)图像。这是我用来下载图片的HTML代码

<a href="#" onclick="window.open('download.php?file=image.jpg','_self', 'download', 'status=0');">Click to download</a> 

但是由于"image.jpg“必须是我的动态变量，所以我必须在jQuery图像替换函数中调用此参数，并在每次更改主图像时动态替换"image.jpg”。我想用我的图像交换函数中的var mainImage替换image.jpg。

我的jQuery知识真的很有限，所以如果有人能帮我做这件事，那就太好了。

Answer 1

假设您使用的是jQuery 1.7+，这应该是可行的

假设在将href动态设置为新图像后，标记标记如下所示

<a href="urltoSomeImage.jpg" id="main_view">Download Image</a>

JavasScript

$(function(){
  $(document).on("click","#main_view",function(e){
      e.preventDefault();
      var self=$(this);
      alert("replace this with awesome code")

      window.open('download.php?file='+self.attr("href")+,'_self', 'download', 'status=0');
  });
});

请注意，此函数仅适用于单个a元素，因为我们的目标是将该功能绑定到id为main_view的元素。由于ID在DOM中应该是惟一的，如果您想要对许多a标记使用该功能，我将向a标记添加一个通用的类选择器，如下所示

<a class="aDownloadble" href="urltoSomeImage2.jpg" id="main_view">Download Image2</a>
<a class="aDownloadble" href="urltoSomeImage4.jpg" id="main_view">Download Image4</a>

并像这样更新我的脚本

$(function(){
  $(document).on("click",".aDownloadble",function(e){
      e.preventDefault();
      var self=$(this);
      alert("replace this with awesome code")

      window.open('download.php?file='+self.attr("href"),'_self', 'download', 'status=0');
  });
});

jQuery on不是必需的。您可以直接使用click事件绑定。但是，如果您通过ajax /注入动态加载这些链接的标记到DOM，则应该使用on或live。

Answer 2

$(document).ready(){

    $("#main_view a").click(function() {
     // Code to run when user clicks on link
    });
});