Question

我希望从图像点击中获取数据链接属性。

以下是我的图片标记

<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>

当我尝试记录或提醒它时，我得到了未定义请帮帮我怎样才能解决它

Answer 1

您没有获得值的原因是您获得了锚标记的数据链接属性，因为它代表了这一点。如果您找到子图像，您将获得数据链接。这是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>

Answer 2

以下是帮助您的代码段。 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>

Answer 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>

Answer 4

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

要获取图像，请使用：

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

获取链接中的img元素（$(this)）。

在此处详细了解.data() - 方法：https://api.jquery.com/data/
在我看来，它比使用.attr() - 方法更清晰。

Answer 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>

Answer 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>

工作小提琴

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 7

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

＆＃13;

$(".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);
});

＆＃13;

<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>

＆＃13;

Answer 8

这指的是锚标签而不是图像标签。使用这个

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

Answer 9

在(.aclick).click() data-link将返回undefined，data-link位于图片上，使用.find()获取图片

find（）方法返回所选元素的后代元素。

要获取data*使用.data()

的值

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

.data（）存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Jquery：访问数据链接属性

9 个答案: