Question

我想使用javascript代码更改标记内图像的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

Answer 1

首先，您应该检查一般的html标记。

ID的范围必须是唯一的，有关更多信息，请参阅here。你应该使用类。

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

删除了第二个a - 标记

当你正在使用jQuery时，我建议避免使用inline-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);    

});

Demo

<强>参考

.on()

Answer 2

使用此：

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);

Javascript获取锚点的子项

2 个答案: