Question

我试图在用户点击它时获取div的文本和网址。我将把数据传递给PHP，以便我可以创建一个显示其他信息的页面。

<div class="superman">
      <h3>Text</h3>
      <h2>Info</h2>
      <h4 class="partnum">PN123456</h4>
      <h4 class="model">Product 456</h4>
      <img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
      <h3>Text</h3>
      <h2>Info</h2>
      <h4 class="partnum">PN234567</h4>
      <h4 class="model">Product 123</h4>
      <img src="http://company.com/123.jpg" id="thumb">
</div>

我需要获取每个div（class = superman）的部件号，型号和图像URL。我已经成功获得了部件号和型号，但是当我尝试在同一功能中获取图像URL时，事情就崩溃了。当我可以获取图像URL时，我无法检索部件号和/或型号。

作为一个例子，我用它来获取URL（我追加为一种警报）。

$('img').click(function() {
  $(this).parent().append($(this).attr('src'));
});

我也尝试了getElementById结构，但那些只抓取第一个div中的信息;如果有人点击页面下方的div，它仍然只抓取第一个。我正在研究大约5,000个div，所以我不知道是否为每个div分配ID是有道理的。我也尝试了某种（这种）结构，但是我太过新秀了。

我已经看到一些问题，答案接近我想要做的事情，但是，就像我说的那样，它既可以是部件号和/或型号，也可以是URL，但绝不是两者兼而有之。在此先感谢您的帮助。

Answer 1

如果你很难获得与图像相关联的partnum或模型，你可以使用jQuery的siblings()方法检索兄弟元素。

然后，例如，您可以连接值并显示它们。

$('img').click(function() {
  var img = $(this);
  var partnum = img.siblings('.partnum').text();
  var model = img.siblings('.partnum').text();
  var url = img.attr('src');
  var text = 'partnum: ' + partnum + '<br>' +
    'model: ' + model + '<br>' +
    'url: ' + url + '<br>';
  img.closest('.superman').append(text);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="superman">
  <h3>Text</h3>
  <h2>Info</h2>
  <h4 class="partnum">PN123456</h4>
  <h4 class="model">Product 456</h4>
  <img src="http://company.com/456.jpg" id="thumb">
</div>
<div class="superman">
  <h3>Text</h3>
  <h2>Info</h2>
  <h4 class="partnum">PN234567</h4>
  <h4 class="model">Product 123</h4>
  <img src="http://company.com/123.jpg" id="thumb">
</div>

要使整个div可单击，只需更改事件处理程序的选择器并使用div作为其函数中所有选择器的上下文：

$(function() {
  $('.superman').click(function() {
    var superman = $(this);
    var partnum = $('.partnum', superman).text();
    var model = $('.model', superman).text();
    var url = $('img', superman).attr('src');
    var text = 'partnum: ' + partnum + '<br>' +
      'model: ' + model + '<br>' +
      'url: ' + url + '<br>';
    superman.append(text);
  });
});

在DIV

1 个答案: