Question

图像＆amp; img src 的ID由Jinja2模板＆amp;动态生成。图像通过函数返回。因此，我希望在按钮元素上使用 $ this jquery选项来获取 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>

这是渲染后的页面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>

这是我收到错误的地方： 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>

Answer 1

ID必须是唯一的，您似乎对按钮和img元素具有相同的ID，$(this)指的是button，而按钮没有src属性，所以改变：

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

到

var src=$(this).parents("li.span3").find("img").attr("src");

Answer 2

没有'src'属性。试试这段代码：

$(document).ready(function() {
   $("button").click(function(){
    var src=$(this).parent().find('img').attr('src');
    console.log(src);
   });
});

Answer 3

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

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

而不是

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

我建议您使用.prop()代替.attr()

jQuery按钮单击attr（'src'）返回Undefined

3 个答案: