仅从调用脚本的div中获取img

Question

是否可以使用js onclick函数来获取图像alt而不使用id或类？

我想从这里拍摄图像，从拍摄电话的div开始;因为你怎么看到有一个普通的div，里面有所有的元素......图像和按钮。

就像div是父母一样，所有其他元素都是孩子，你必须从这个div中找到img孩子，即使同一页面上有多个相似的div。

<div id="ww10140700815" class="post-content">

<div class="col-md-7">
<img src="../im/wall/w10140700815.jpg" alt="w10140700815"/>
</div>
<div class="col-md-5">
<span class="meta">ID: w10140700815</span>
<a class="btn btn-default">Take Alt</a>
</div>

</div>
<div id="ww10140700815" class="post-content">

<div class="col-md-7">
<img src="../im/wall/w10140700815.jpg" alt="w10140700815"/>
</div>
<div class="col-md-5">
<span class="meta">ID: w10140700815</span>
<a class="btn btn-default">Take Alt</a>
</div>

</div>
<div id="ww10140700815" class="post-content">

<div class="col-md-7">
<img src="../im/wall/w10140700815.jpg" alt="w10140700815"/>
</div>
<div class="col-md-5">
<span class="meta">ID: w10140700815</span>
<a class="btn btn-default">Take Alt</a>
</div>

</div>

我已经使用了这个，接近img进行验证，但它选择了页面上的所有图像，因为我有多个div，如上所示

$("div > img:nth-child(1)").css('border', '4px solid black');

Answer 1

如果您的HTML结构将在显示时保留，您将使用CSS选择器来隔离click事件的正确元素以及找到相应的imgelement。

// Listen for clicks on any div with the "post-content" class
$("div.post-content").on("click", function(evt){
  // Look for images that are in a child div that has a class of "col-md-7"
  var $img = $("div[class='col-md-7'] img", this);
  console.log($img.attr("alt"));  // Get its alt value
});

.btn { cursor:pointer; display:inline-block; background:#e0e0e0; border-radius:4px; padding:5px; }
.btn:hover { box-shadow:0 0 2px #909090; }
.btn:active { box-shadow:0 0 2px #303030; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ww10140700815" class="post-content">
  <div class="col-md-7">  
    <img src="../im/wall/w10140700815.jpg" alt="w10140700815"/>
  </div>
  <div class="col-md-5">
    <span class="meta">ID: w10140700815</span>
    <a class="btn btn-default">Take Alt</a>
  </div>
</div>
<div id="ww10140700815" class="post-content">
  <div class="col-md-7">
    <img src="../im/wall/w10140700825.jpg" alt="w10140700825"/>
  </div>
  <div class="col-md-5">
    <span class="meta">ID: w10140700825</span>
    <a class="btn btn-default">Take Alt</a>
  </div>
</div>
<div id="ww10140700815" class="post-content">
  <div class="col-md-7">
    <img src="../im/wall/w10140700835.jpg" alt="w10140700835"/>
  </div>
  <div class="col-md-5">
    <span class="meta">ID: w10140700835</span>
    <a class="btn btn-default">Take Alt</a>
  </div>
</div>

Answer 2

您可以将其嵌套在获取其子项的div中，或者您可以将其添加到img中更短的时间

<div id="ww10140700815" class="post-content">

<div class="col-md-7">
<img onclick="alert(this.getAttribute('alt'))" src="../im/wall/w10140700815.jpg" alt="w10140700815"/>
</div>
<div class="col-md-5">
<span class="meta">ID: w10140700815</span>
<a class="btn btn-default">Take Alt</a>
</div>

最好，

极