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

Posted 2023-02-18

【中文标题】每个类的jquery单击事件以查找href属性

【英文标题】：jquery click event for each class to find href attribute

【发布时间】：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。

为什么是数据目标元素？

【参考方案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