javascript - 如何在 JavaScript 中到达特定的 div？

Question

我有一个 plp 页面，其中列出了项目。用户可以收藏任何项目。我的问题是当用户喜欢一个项目时，我想更改它应该显示收藏的星形图标。

这是我的项目结构:

<div class="product-tile-top">
                <div class="product-tile-top-inner tile-wishlist">
                    <span role="button" class="wish-list-icon" id="grc398342">
                      <div class="btn btn-default btn-sm pdp-wishlist-btn">
                          <span>
                              <img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
                                  </span>
                      </div>
                    </span>
                </div>
              </div>

每个项目都有这样的唯一ID:

<span role="button" class="wish-list-icon" id="grc398342">

所以，我只想在用户收藏时访问并更改此部分:

<span>
   <img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
</span>

我这样更改了我的代码，但它没有运行？

var newURL = "/_ui/responsive/common/images/favorite-red.svg";
    function fav(elemId){
        $("#elemId").find(".favorite").attr("src", newURL)
    }
    $('#addBtn').click(function() {
        var listName = $('#listName').val();
        var productCode = $('#productCode').val();
        $('#notificationP').text('');
        if (listName.trim() == '') {
            $('#notificationP').text($('#nameValidate').val());
            return;
        }
        $('.loading-overlay').show();
        $.ajax({
            type : "POST",
            url : ACC.config.encodedContextPath + "/wishlist/add",
            data : 'productCode=' + productCode + '&listName=' + listName,
            success : function(loginPopup) {
                $('.loading-overlay').hide();
                if (loginPopup.code == '0' || loginPopup.code == '2') {
                    $('#notificationP').text($('#duplicate').val());
                } else if (loginPopup.code == '1') {
                    $('#notificationP').text($('#add').val());
                    fav(productCode);
                }
                else if(loginPopup.code == '3'){
                    $('#notificationP').text($('#maxProductsError').val()+' '+loginPopup.errorCodeMeg+')');
                }
                else {
                    $('#notificationP').text($('#globleError').val());
                }
            },
            error : function(error) {
                $('.loading-overlay').hide();
                $('#notificationP').text($('#globleError').val());
            }
        });
    });

如何访问此图片？

Answer 1

div 的

Onclick 调用函数并推送 div 的 id。使用 children 获取 span child 并进行更改

function a(id) {
  var ele = document.getElementById(id).children[0].children[0];
  ele.style.color = "red";
  ele.children[0].setAttribute('url',"www.xyz.com")
  console.log(ele.children[0].getAttribute('url'))
}

<div class="product-tile-top">
  <div class="product-tile-top-inner tile-wishlist">
    <span role="button" class="wish-list-icon" id="grc398342" onclick=a(this.id)>
      <div class="btn btn-default btn-sm pdp-wishlist-btn">
        <span>dd
            <img class="favorite" src="/_ui/responsive/common/images/favorite.svg" height="17px;">
         </span>
      </div>
    </span>
  </div>
</div>