Question

我有一组面板包括按钮和图像，现在我需要让每个图像的alt属性接近点击的按钮

<div class="panel panel-default">
    <div class="panel-heading clearfix">
        <button type="button" class="btn btn-danger btn-xs pull-right btn-delete-img" data-id="pmkLips">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
        </button>
    </div>
    <div class="panel-body">
        <img src="../img/pmkLips/img.png" class="img-responsive" alt="sample Data">
    </div>
</div>

我试过这个

$(function() {
    $(".btn-delete-img").on("click", function(){
    var imgName =  $(this).next('img').attr('alt'); 
});

和

$(function() {
    $(".btn-delete-img").on("click", function(){
    var imgName =  $(this).find('img').attr('alt'); 
});

但我正在

img：undefined

在控制台中。你能告诉我这里我做错了什么吗？

Answer 1

使用closest('.panel')查找祖先.panel，然后在其中找到img，如下所示。

$(".btn-delete-img").on("click", function () {
    var imgName = $(this).closest('.panel').find('img').attr('alt');
    alert(imgName);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="panel panel-default">
    <div class="panel-heading clearfix">
        <button type="button" class="btn btn-danger btn-xs pull-right btn-delete-img" data-id="pmkLips">
            <span class="glyphicon glyphicon-trash" aria-hidden="true">Click</span>
        </button>
    </div>
    <div class="panel-body">
        <img src="../img/pmkLips/img.png" class="img-responsive" alt="sample Data">
    </div>
</div>

Answer 2

您需要先使用.parent()（或.closest()）遍历DOM的一个级别，然后使用.next()转到下一个元素，然后使用{{1}获取图像}}：

.find()

<强> jsFiddle example

问题是获取最近图像的alt到按钮

2 个答案: