Javascript DOM未在GET请求时更新+;数据属性
问题:在更新通过GET请求检索的图像的src时,DOM从不更新,但它们的新值显示在控制台中 可疑原因:我认为使用数据属性存在一些冲突,但使用attr()而不是data()似乎无法解决 要更新的HTML:Javascript DOM未在GET请求时更新+;数据属性,javascript,jquery,Javascript,Jquery,问题:在更新通过GET请求检索的图像的src时,DOM从不更新,但它们的新值显示在控制台中 可疑原因:我认为使用数据属性存在一些冲突,但使用attr()而不是data()似乎无法解决 要更新的HTML: <div class="data-block"> <img data-item="hp-logo" /> <img data-item="hp-banner" /> </div> if(promoid != null) {
<div class="data-block">
<img data-item="hp-logo" />
<img data-item="hp-banner" />
</div>
if(promoid != null) {
$.get({
url: '/snippets/data.html',
cache: false
}).then(function(data){
var tempData = $('<output>').append($.parseHTML(data)).find('.data[data-promo-id="' + promoid + '"]');
myContent = tempData.html();
dataItems = $('.data-block').html();
//console.log('Data Items On Page: ', dataItems);
$(dataItems).each(function (index, value) {
if( $(this).is('[data-item]')) {
//console.log('Data Items With Attribute: ', this);
dataItemLookup = $(this).attr('data-item');
//console.log('Data Item Lookup Value: ', dataItemLookup);
$(myContent).each(function (index, value) {
//console.log('Retrieved Items Checking Against: ', this);
if ( $(this).attr('data-alias') == lastalias ) {
//console.log('Retrieved Items Match Alias: ', this);
if ($(this).attr('data-item') == dataItemLookup) {
//console.log('Retrieved Item Match', this);
dataImageDesktop = $(this).attr('data-image-desktop');
//console.log('Value to be Passed to Data Item: ', dataImageDesktop);
} else {
// Do nothing
}
} else {
// Do nothing
}
});
$(this).attr('src', dataImageDesktop);
console.log(this);
}
});
});
}
data.html:
<div class="data-block">
<img data-item="hp-logo" />
<img data-item="hp-banner" />
</div>
if(promoid != null) {
$.get({
url: '/snippets/data.html',
cache: false
}).then(function(data){
var tempData = $('<output>').append($.parseHTML(data)).find('.data[data-promo-id="' + promoid + '"]');
myContent = tempData.html();
dataItems = $('.data-block').html();
//console.log('Data Items On Page: ', dataItems);
$(dataItems).each(function (index, value) {
if( $(this).is('[data-item]')) {
//console.log('Data Items With Attribute: ', this);
dataItemLookup = $(this).attr('data-item');
//console.log('Data Item Lookup Value: ', dataItemLookup);
$(myContent).each(function (index, value) {
//console.log('Retrieved Items Checking Against: ', this);
if ( $(this).attr('data-alias') == lastalias ) {
//console.log('Retrieved Items Match Alias: ', this);
if ($(this).attr('data-item') == dataItemLookup) {
//console.log('Retrieved Item Match', this);
dataImageDesktop = $(this).attr('data-image-desktop');
//console.log('Value to be Passed to Data Item: ', dataImageDesktop);
} else {
// Do nothing
}
} else {
// Do nothing
}
});
$(this).attr('src', dataImageDesktop);
console.log(this);
}
});
});
}
不确定如何继续对此问题进行故障排除。除了DOM更新之外,一切都按预期进行。想法?而不是$(选择器)。attr('data-name')
尝试使用$(选择器)。数据('name')
,如文档所示。而不是$(选择器)。attr('data-name')
尝试使用$(选择器)。数据('name')
如文档所示。使用html()
在一个元素上,将获得对象的innerHTML,它是一个字符串。因此,稍后在$()中使用它将导致jQuery创建未附加到DOM的新元素。如果您要做的只是选择元素并修改它们,只需使用$(选择器)并修改它。不要使用html()并用$()包装结果。在元素上使用html()
将获得对象的内部html,它是一个字符串。因此,稍后在$()中使用它将导致jQuery创建未附加到DOM的新元素。如果您要做的只是选择元素并修改它们,只需使用$(选择器)并修改它。不要使用html()并用$()包装结果。为什么要尝试在字符串中进行每项操作?此处/$('.data block').html();它们可能出现在页面的多个位置和多个上下文中,因此我需要检查它们是否具有数据项属性,然后有条件地检查它们是否与别名匹配。您可以显示完整的源代码吗?如果我理解正确的话$('.data block').html();正在检索innerHtml。然后$(dataItems)。each()在这些数据中循环。我怎么创造新的?嘿嘿嘿伙计们请冷静点。我还有一个问题:为什么在源代码中没有定义变量lastalas?为什么要尝试在字符串中执行每个操作?此处/$('.data block').html();它们可能出现在页面的多个位置和多个上下文中,因此我需要检查它们是否具有数据项属性,然后有条件地检查它们是否与别名匹配。您可以显示完整的源代码吗?如果我理解正确的话$('.data block').html();正在检索innerHtml。然后$(dataItems)。each()在这些数据中循环。我怎么创造新的?嘿嘿嘿伙计们请冷静点。我还有一个问题:为什么源代码中没有定义变量lastalas?