每个类的jquery单击事件以查找href属性答案

【问题标题】：jquery click event for each class to find href attribute每个类的jquery单击事件以查找href属性
【发布时间】：2014-02-09 05:28:39
【问题描述】：

我是 jquery 的新手。我正在尝试查找目标元素的“href”属性。

我为每个类“链接重定向”编写了一个点击事件脚本。在此尝试使用 data-target 属性为目标元素选择 href。

但是通过使用我的脚本，我总是得到第一个 div 的 href，即“link1”。

我在这里做错了什么？

<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link1" class="title-link">LInk</a>
    </div>
</div>
<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link2" class="title-link">LInk</a>
    </div>
</div>
<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link3" class="title-link">LInk</a>
    </div>
</div>
<div class="link-redirect" data-target=".title-link">
    <div cass="div1">
        <a href="link4" class="title-link">LInk</a>
    </div>
</div>

<script>
    $('.link-redirect').each(function(){
        $(this).on( "click", function() {
            var self = $(this);
            var link = $(self.data('target')).attr('href');           
            alert(link);           
        });
    });
</script>

【问题讨论】：

课程在div，而不是a。
为什么是数据目标元素？

标签： jquery

【解决方案1】：

您需要找到与当前link-redirect 元素相关的锚元素（在这种情况下为后代）

$('.link-redirect').on("click", function () {
    var self = $(this);
    var link = self.find(self.data('target')).attr('href');
    alert(link);
});

演示：Fiddle

【讨论】：

错过了data。你明白了。
@Anup：越来越未定义。
@Kango 在这种情况下，您提供的 html 可能与您页面中的内容不同...您是否查看了附加的演示
我的问题。我的 html 结构略有不同。

【解决方案2】：

尝试使用 Jquery 选择器提供的context 功能，

 $('.link-redirect').click(function(){
      var link = $($(this).data('target') , $(this)).attr('href');           
      alert(link);           
 });

DEMO

【讨论】：

@sarath 当然 :) 但我猜 OP 并没有问这个问题。
@Kango 你测试过我提供的demo了吗？

【解决方案3】：

你应该把你的anchor tag放在你的div element中，不要用each() or loops绑定click event试试这个，

$('.link-redirect').on("click", function (e) {
    var self = $(this);
    var link = self.find('a').attr('href');
    alert(link);
});

Demo

【讨论】：

【解决方案4】：

这是最简单的方法：

$('.title-link').on("click", function () {
   alert($(this).attr("href"));

});

jsfiddle

【讨论】：