Javascript获取锚点的子级

Javascript Get the children of an anchor

本文关键字：获取 Javascript      更新时间：2023-09-26

我想使用javascript代码更改a标记内图像的src。为此，我使用了以下代码：

function changestyle(cat) {
  var el = $(cat).find('.img_box').attr('id');
  console.log(el);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="changestyle(this);" id="onc_2">
  this is the first anchor
  <div class="">hello</div> 
  <div class="img_box" id='gtrf'>
    <a href="" class="yyy" id='tttt'>
      <img src="images/arrows_list.png" class="c1"/>
      image1 to be changed
    </a>
  </div>
</a>
 <a href="#" onclick="changestyle(this);" id="onc_2">
  this is second anchor
    <div class="">hello</div> 
    <div class="img_box" id='gtrf'>
    <a href="" class="yyy" id='tttt'>
      <img src="images/arrows_list.png" class="c1"/>
     image2 to be changed with the onclick action
    </a>
   </div>
   </a>

但我总是在控制台中未定义。当我删除单击的<a>中的<a>时，它就起作用了。有没有办法通过单击第一个<a>来更改图像的src？

首先，您应该检查您的通用html标记。

ID在其范围内必须是唯一的，请参阅此处了解更多信息。您应该使用类。

<a href="#" id="onc_2" class="anchor">
  <div class="">lol</div> 
  <div class="img_box" id='gtrf'>
      <img src="your/src.png" class="c1"/>
  </div>
</a>

根据w3c规范，我在这里删除了第二个a-标签

由于您无论如何都在使用jQuery，我建议您避免使用内联javascript。

$('.anchor').on('click', function(){
    var el = $(this).find('.img_box').attr('id');    
    var el = $(this).find('.img_box img').attr('src', new_src);   
    console.log(el);    
});

演示

参考

.on（）

使用此：

HTML:

<a href="#"  onclick="changestyle(this);" id="onc_2">mmm
<div class="">lol</div> 
<div class="img_box" id='gtrf'>
 <a href="" class="yyy" id='tttt'>
  <img src="images/arrows_list.png" id="target-image" class="c1"/>hhh
 </a>
</div>

Javascript：

var targetLink = document.getElementById('onc_2');
var targetImage = document.getElementById('target-image');
targetLink.addEventListener('click', function(){
  targetImage.src = yourNewImageSrc;
}, false);
相关文章：