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

您可以像这样在{j1}中对传递的元素使用.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

Onclick中的

div调用一个函数并推入div的id。使用children获取span子并进行更改

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>

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

2 个答案: