从您单击的按钮内的图像中获取 src。答案

【问题标题】：Get src from image inside button that you have clicked.从您单击的按钮内的图像中获取 src。
【发布时间】：2018-02-14 13:01:25
【问题描述】：

我正在尝试从按钮内的图像中获取 SRC，我必须按下该按钮才能打开手风琴（引导程序）。我想要的是从按钮内的图像中获取 src，但我似乎找不到我正在寻找的一个很好的例子。只有当您单击图像本身时的 src 值。

我当前的代码：

function collapse() {
    console.log("Help!");
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

  <title>Hello, world!</title>
  <style>
    #collapseimg {
      width: 15px;
    }
  </style>
</head>

<body>
  <div id="accordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" onclick="collapse()" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			<img id="collapseimg" src="collapse-close.png" />
          	Is het nodig een afspraak te maken?
	        </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <script src="main.js"></script>
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

那我想要什么？我想从带有 ID 的 img 中获取当前的 src 值：collapseimg。但只有我点击的按钮里面的那个。

亲切的问候，罗伯特

【问题讨论】：

@I.Manev 仅在有一个具有该 ID 的 img 时才有效，我只需要在我单击的实际按钮中的那个。

标签： javascript jquery

【解决方案1】：

首先不要使用内联 JavaScript。而是绑定到您需要的元素。然后使用this、.find()、.attr()获取图片的src属性$(this).find('img').attr('src')：

$('button.btn.btn-link').click(function() {
  console.log($(this).find('img').attr('src'))
})

#collapseimg {
  width: 15px;
}

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			<img id="collapseimg" src="collapse-close.png" />
          	Is het nodig een afspraak te maken?
	        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
        on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
        raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

<!-- Optional JavaScript -->
<script src="main.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

【讨论】：

【解决方案2】：

由于 ID 在文档中必须是唯一的，您可以简单地使用：

var button = document.getElementById("collapseimg");
var hrefVal = button.getAttribute("src");

如果您有多个按钮，并且想要在单击的按钮中获取图像（不使用任何 ID），您可以通过单击事件来实现。

var handleClick = function(event) {
    var buttonClicked = event.target;
    // using jQuery here, since mentioned in your tags:
    var imageSrc = $(buttonClicked).find("img").eq(0).attr("src");
}

我必须同意 j08691。不要使用内联 JS。

【讨论】：