[英]How can I reach specific div in JavaScript?
我有一个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());
}
});
});
如何访问该图像?
您可以像这样在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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.