如何在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

您可以像這樣在jquery中的傳遞元素上使用.find()方法。 我們給.find()圖像的類名，然后更改圖像的src屬性。 在此示例中，如果單擊圖標，它將變為星形。

 var newURL = "https://img.freepik.com/free-vector/start_53876-25533.jpg?size=338&ext=jpg"; function fav(elem){ $(elem).find(".favorite").attr("src", newURL) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-tile-top"> <div class="product-tile-top-inner tile-wishlist"> <span role="button" class="wish-list-icon" id="grc398342" onclick="fav(this)"> <div class="btn btn-default btn-sm pdp-wishlist-btn"> <span> <img class="favorite" src="https://img.freepik.com/free-vector/yellow-star-trail-set_23-2147739091.jpg?size=338&ext=jpg" height="17px;"> </span> </div> </span> </div> </div> 

至於您的評論如何在ajax中做到這一點。 您可以在ajax調用中返回商品ID，然后像這樣訪問它

 var newURL = "https://img.freepik.com/free-vector/start_53876-25533.jpg?size=338&ext=jpg"; function fav(elemId){ $("#elemId").find(".favorite").attr("src", newURL) } // your ajax call $.ajax({ url: "", data: { /*Your parameters*/}, success: function(returnedData){ fav(returnedData); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="https://img.freepik.com/free-vector/yellow-star-trail-set_23-2147739091.jpg?size=338&ext=jpg" height="17px;"> </span> </div> </span> </div> </div> 

Answer 2

div Onclick調用一個函數並推送div的id 。 使用children會生滿孩子並進行更改

 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>