Jquery：访问数据链接属性答案

【问题标题】：Jquery : Access data-link attributeJquery：访问数据链接属性
【发布时间】：2017-05-18 11:32:49
【问题描述】：

我想从图像单击中获取数据链接属性。

下面是我的图片标签

<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

要点击它，这就是我正在做的，

<script type="text/javascript" language="javascript">
       $(".aclick").click(function (e) {
        e.preventDefault();
        alert($(this).attr("data-link"));
        var link = $(this).data("data-link");// tried both 
        console.log(link);

    });

</script>

当我尝试记录或提醒它时，我得到未定义请帮助我如何解决它

【问题讨论】：

试试这个，alert($(".img-responsive").attr("data-link"));
仅供参考，我删除了 PHP 标记，因为这个问题与 PHP 无关。

标签： javascript jquery html

【解决方案1】：

下面是帮助您的代码 sn-p。 data-link 属性在 img 标签中，而不是在 'a' 标签中。

$(".aclick").click(function (e) {
        e.preventDefault();
        alert($(this).find('img').attr("data-link"));
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

【讨论】：

【解决方案2】：

您没有获得值的原因是您获得了锚标记的 data-link 属性，因为它代表了这一点。如果您找到子图像，您将获得数据链接。这是它的一个fiddle。

<script type="text/javascript" language="javascript">
       $(".aclick").click(function (e) {
             e.preventDefault();
             alert($(this).find('img').attr('data-link'));
             var link = $(this).find('img').attr('data-link')
             console.log(link);

       });

</script>

【讨论】：

【解决方案3】：

你可以试试这个，

<script type="text/javascript" language="javascript">
     $(".aclick").click(function (e) {
        e.preventDefault();
        alert($(this).find('img').attr('data-link'));
        var link = $(this).find('img').attr('data-link')
        console.log(link);    
    });
</script>

【讨论】：

【解决方案4】：

在上下文中，$(this) 指的是链接，而不是图片。

要获取图像，请使用：

var link = $('img', $(this)).data('link');

这将获得链接内的img 元素（即$(this)）。

在此处阅读有关.data() 方法的更多信息：https://api.jquery.com/data/
在我看来，它比使用.attr()-方法更简洁。

【讨论】：

【解决方案5】：

您在 img 标签中分配数据链接属性，

所以你必须在 img 标签上写点击事件

    $(".aclick img").click(function (e) {
        e.preventDefault();
        alert($(this).data("link"));
        var link = $(this).data("link");
        console.log(link);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

【讨论】：

【解决方案6】：

您的点击事件也必须在图片标签上。

<script type="text/javascript" language="javascript">
       $(".aclick img").click(function (e) {
        e.preventDefault();
        alert($(this).attr("data-link"));
        var link = $(this).attr("data-link");// tried both 
        console.log(link);

    });

</script>

工作小提琴

   $(".aclick img").click(function (e) {
        e.preventDefault();
        alert($(this).attr("data-link"));
        var link = $(this).attr("data-link");// tried both 
        console.log(link);

    });

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

【讨论】：

【解决方案7】：

Img 是a 的子元素。因此请尝试使用$(this).children('img')。并使用data('link') 而不是data('data-link')

$(".aclick").click(function(e) {
  e.preventDefault();
  alert($(this).children('img').attr("data-link"));
  var link = $(this).children('img').data("link"); // tried both 
  console.log(link);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="aclick">
  <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

【讨论】：

【解决方案8】：

这是指锚标记而不是图像标记。用这个

$('.aclick img').attr("data-link");

【讨论】：

【解决方案9】：

打开(.aclick).click() data-link 将返回undefined，data-link 在图像上，使用.find() 获取图像

find() 方法返回被选元素的后代元素。

要获取data* 的值，请使用.data()

data-* 属性用于存储页面或应用程序私有的自定义数据。

.data() 存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。

$(".aclick").click(function (e) {
    e.preventDefault();
    var link = $(this).find('img').data('link');
    console.log(link);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#"  class="aclick">
    <img data-link="petroliumjelly.php" src="productsimgs/petroliumjelly.png" class="img-responsive" id="2">
</a>

【讨论】：