Question

我有html结构：

<div>
    <ul>
        <li><img src="img/product1.png" alt="product1"></li>
        <li><img src="img/product2.png" alt="product2"></li>
        <li><img src="img/product3.png" alt="product3"></li>
        <li><img src="img/product4.png" alt="product4"></li>
    </ul>
</div>

我已经完成了尝试创建函数，它将获取当前img元素的属性，我想从这个函数返回这个当前属性，我有下一个代码：

var sr = "";
function imgSrc(){
   $('div').on("click", "ul li img", function () {
        sr = $(this).attr("src");
        return sr;
    });
}

console.log(imgSrc());

不幸的是我在我的控制台中未定义。

Answer 1

您的功能不会返回任何内容。它只是定义了一个onClick处理程序。这就是为什么你得到'undefined'的返回值

如果您打算在点击它时记录div的src，那么您的代码需要更像这样......

$('div').on("click", "ul li img", function () 
{
    var sr = $(this).attr("src");
    console.log(sr);
});

在元素上注册事件监听器。

但是，如果你想在一个函数中包装监听器，然后像你所做的那样调用该函数，那么它也可以工作 - 单击一个元素时将触发on（“click”）中的函数。将设置sr的值，但外部函数本身不会返回值。您需要找到另一种方法来处理sr的值，在on中的函数内（“click”）

Answer 2

你必须在调用函数

之前放置事件处理程序

var sr = "";
function imgSrc(obj){
    if(obj.tagName == "IMG")
        sr = $(obj).attr("src");
    else
        sr = $(obj).find("img").attr("src");
    return sr;
}
$('div').on("click", "li img", function () {
    console.log(imgSrc(this));
});

Answer 3

如果我理解正确，你希望sr具有属性值吗？

var sr = "";
$('div').on("click", "ul li img", function () {
    sr = $(this).attr("src");
});

console.log(sr);

如何创建将返回jQuery方法attr值的函数

3 个答案: