Question

我试图从按钮内的图像中获取SRC，我必须按下才能打开手风琴（bootstrap）。我想要的是从按钮内的图像中获取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中获取当前的src值，ID为：collapseimg。但只有我点击的按钮内的那个。

亲切的问候，罗伯特

Answer 1

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

＆＃13;

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

＆＃13;

#collapseimg {
  width: 15px;
}

＆＃13;

<!-- 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>

＆＃13;

Answer 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。

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

2 个答案: