jQuery向a href链接添加点击事件

Question

我正在从WebForms转换到ASP.NET MVC，并有一个问题。

我有一个循环，动态生成链接，在循环中picNumberLink是一个变量，image是一个变量图片链接。

我想避免在内联中放置JavaScript操作，因此在我的WebForms项目中执行了以下操作：

hyperLink.Attributes.Add("onclick", "javascript:void(viewer.show(" + picNumberlink + "))");

在ASP.NET MVC中，使用jQuery的等效方法是什么？

我看过使用$(document).ready事件来附加点击事件的示例，但我无法弄清楚如何将picNumberLink变量传递到JavaScript函数中的语法。

有什么建议吗？

- leora

Answer 1

编辑：如果您使用此表单的 ID 生成链接：

<a id="piclink_1" class="picLinks">...</a>
<a id="picLink_2" class="picLinks">...</a>

<script type="text/javascript">
    $('a.picLinks').click(function () {
        //split at the '_' and take the second offset
        var picNumber = $(this).attr('id').split('_')[1];
        viewer.show(picNumber);
    });
</script>

- karim79

---

picNumberLink来自哪里，因为这是一个变量？ - leora

@我 - 现在更有意义了吗？ - karim79

也许这就是我的问题/疑问。我只有一张图片，那么我应该把picNumber放在哪儿，以便我可以从JavaScript中获取它？我不显示文本。 - leora

但我在链接中没有显示任何文本，只有图像。如果数字在文本中，那就完美了，但它不在。 - leora

谢谢你的努力。我刚刚找到了最新的问题并解决了它。我的jquery.js链接中有一个错别字:(。现在一切都好了。 - leora

Answer 2

var functionIWantToCall = function(){
    var wrappedLink = $(this);
    //some serious action
}

//this should be called on document ready
$("#myLinkId").click(functionIWantToCall);  

如果您需要获取图片的URL，请将其保存在锚点的href属性中：

var functionIWantToCall = function(event){
    event.preventDefault(); //this one is important
    var link = $(this).attr('href');
    //some serious action
}

- Arnis Lapsa

---

我的问题是关于如何让JavaScript获取picNumberLink变量，现在它不再是内联的。 - leora

将其添加到链接旁边的隐藏字段中，然后在函数IWantToCall中使用“var picNumberLink = wrappedLink.next().val()”。 - Arnis Lapsa

这似乎是一个临时解决方案，但如果没有更优雅的方法，那么感谢这个想法。它的语法会是什么样子？只是一个普通的隐藏HTML标签吗？ - leora

<input type='hidden' value='<%= Model.PictureUrl %>' /> - Arnis Lapsa

Answer 3

$(document).ready(function()
{

$('#LinkID').click(function() {
    viewer.show($(this).attr('picNumber'));
});

});

你可以在超链接标记中添加一个名为picNumber的属性，并在MVC视图中设置它。

你的视图中的链接可能看起来像这样：

<%= Html.ActionLink("Index", new { id = "LINKID", picNumber = 1 }) %>

- Rigobert Song

---

$(document).ready(function(){}) 可以缩写为 $(function(){})。 - kͩeͣmͮpͥ ͩ

为了让这个工作，我需要以下内容：{{link1：<img src="..">}} - leora

Answer 4

假设您能够更改输出的HTML，那么您不能将picNumberLink放在id或class属性中吗？

HTML：

<a href="..." id="piclink-242" class="view foo-242"><img src="..."/></a>

jQuery：

$(function() {
  // using the id attribute:
  $('.view').click(function() {
    viewer.show(+/-(\d+)/.exec(this.id)[1]);
  });

  // or using the class attribute:
  $('.view').click(function() {
    viewer.show(+/(^|\s)foo-(\d+)(\s|$)/.exec(this.className)[2]);
  });
}}

- searlea

---

刚意识到这非常像karim79的回答...我想我们需要看一下me的HTML。 - searlea