Question

我是jquery的新手。我试图找到目标元素的“href”属性。

我为每个类“link-redirect”编写了一个click事件脚本。在此尝试使用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>

Answer 1

你需要找到相对于锚元素（在这种情况下是后代）到当前link-redirect元素

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

演示：Fiddle

Answer 2

您的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); });试试这个，

{{1}}

Demo

Answer 3

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

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

DEMO

Answer 4

这是最简单的方法：

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

});

jsfiddle

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

4 个答案:

DEMO