Fatal编程技术网
  • jquery/
  • jQuery按钮单击attr（'；src'；）返回未定义的

jQuery按钮单击attr（'；src'；）返回未定义的

jquery

jQuery按钮单击attr（'；src'；）返回未定义的,jquery,Jquery,img src的图像和ID由Jinja2模板动态生成，图像通过函数返回。 因此，我希望在按钮元素上使用$thisjquery选项来获取img src。 这是jinja2模板代码 <div id="center-container" class="span9"> {% for article_row in images | batch(3, '&nbsp;') %} <ul class="thumbnails"> {% for

img src的图像和ID由Jinja2模板动态生成，图像通过函数返回。 因此，我希望在按钮元素上使用$thisjquery选项来获取img src。 这是jinja2模板代码

<div id="center-container" class="span9">
    {% for article_row in images | batch(3, '&nbsp;') %}
        <ul class="thumbnails">
        {% for article in article_row %}
            <li class="span3">

                <div class="thumbnail">
                <img src ="img/{{ article|e  }}" data-src="holder.js/360x270" alt="" id="img{{loop.index}}">

                <h3>Thumbnail label</h3>
                <p>{{ article }}</p>
                </div>
            <button class="btn btn-inverse" type="button" id="img{{loop.index}}">Large button</button>
            </li>
        {% endfor %}
        </ul>
    {% endfor %}
</div>


{图片中文章|行的百分比|批处理（3，，）%}

    
{第_行%中的项目的百分比}

  • 
缩略标签
{{条款}
    
大按钮

    • 
{%endfor%}


{%endfor%}
这是呈现后的页面src:

<html>
<head>
</head>
    <body>
<div id="center-container" class="span9">
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail">
            <img src ="img/allofthethings.png" data-src="holder.js/360x270" alt="" id="img1">
            <h3>Thumbnail label</h3>
            <p>allofthethings.png</p>
            </div>
        <button class="btn btn-inverse" type="button" id="img1">Large button</button>
        </li>
        <li class="span3">
            <div class="thumbnail">
            <img src ="img/brogrammer.jpg" data-src="holder.js/360x270" alt="" id="img2">
            <h3>Thumbnail label</h3>
            <p>brogrammer.jpg</p>
            </div>
        <button class="btn btn-inverse" type="button" id="img2">Large button</button>
        </li>
        <li class="span3">
            <div class="thumbnail">
            <img src ="img/couragewolf.jpg" data-src="holder.js/360x270" alt="" id="img3">
            <h3>Thumbnail label</h3>
            <p>couragewolf.jpg</p>
            </div>
        <button class="btn btn-inverse" type="button" id="img3">Large button</button>
        </li>
    </ul>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="../inc/js/bootstrap.min.js"></script>  
</body>



    

  • 
缩略标签
allofthethings.png
    
大按钮

    • 

  • 
缩略标签
brogrammer.jpg
    
大按钮

    • 

  • 
缩略标签
couragewolf.jpg
    
大按钮

    •
这就是我得到错误的地方： js函数

<script type="text/javascript">
   $(document).ready(function() {
       $("button").click(function(){
        var src=$(this).attr("src");
        alert(src);
           alert($(this).attr('src'));
        console.log(src);
       });
   });
</script>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var src=$（this.attr（“src”）；
警报（src）；
警报（$（this.attr（'src'））；
console.log（src）；
});
});
ID必须是唯一的，对于按钮和img元素，您似乎有相同的
ID
，
$（此）
指的是
按钮
，而按钮没有
src
属性，因此更改：

var src=$(this).attr("src");
到

$（此）
指的是没有
src
属性的按钮，因此将代码更改为

var src=$(this).closest("li.span3").find("img").prop("src");
而不是

var src=$(this).attr("src");
我建议您使用而不是没有'src'属性。请尝试以下代码：

$(document).ready(function() {
   $("button").click(function(){
    var src=$(this).parent().find('img').attr('src');
    console.log(src);
   });
});
或者，最好使用
.closest（）
而不是
.parents（）
。 
$(document).ready(function() {
   $("button").click(function(){
    var src=$(this).parent().find('img').attr('src');
    console.log(src);
   });
});