0

img src的图像和 ID由 Jinja2 模板动态生成，图像通过函数返回。所以我希望在按钮元素上使用$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>
4

3 回答 3

1

IDID必须是唯一的，按钮和img元素似乎相同，$(this)指的是button，并且按钮没有src属性，所以更改：

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

至

var src=$(this).parents("li.span3").find("img").attr("src");
于 2013-10-06T09:35:16.757 回答
1

没有“src”属性。试试这个代码：

$(document).ready(function() {
   $("button").click(function(){
    var src=$(this).parent().find('img').attr('src');
    console.log(src);
   });
});
于 2013-10-06T09:40:33.433 回答
0

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

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

代替

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

我建议你使用.prop()而不是.attr()

于 2013-10-06T09:37:35.477 回答