在获取最接近按钮的图像的alt时遇到问题

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：未定义

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

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() 转到下一个元素，然后用 .find() 获取图像：

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

js小提琴示例