Javascript Получить ребенок якоря

Question

Я хочу изменить ГКЗ изображения внутри тега с яваскриптом code.For, который я использовал этот код:

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>

Но я всегда получить undefined в консоли. Когда я удаляю <a> внутри нажатого <a>, он работает. Есть ли способ изменить src изображения, щелкнув по первому <a>?

Answer 1

Прежде всего, вы должны проверить общий HTML-разметку.

Идентификаторы должны быть уникальными в своем объеме, см. 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> 

я удалил второй a -tag здесь, согласно w3c-specification

Как вы используете 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);  

}); 

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