我正在尝试使用来自端点的数据构建轮播。我不知道在服务器中使用哪个大小,所以在前端我做一些处理来决定要使用的图像的大小。之后,我隐藏了未使用的图像。当我display:none
时,它仍会触发HTTP请求,从而影响我的表现。我尝试使用remove()
代替.css('display','none');
但是因为我正在使用课程而删除了其他图片。
如何在不影响其他人的情况下删除循环中的图像?
这个数据,我从服务器(组件)得到以下10个。
<div class="foo-grid-img">
<img src="https://cdn.com/image/1.jpg" class="foo-big" />
<img src="https://cdn.com/image/2.jpg" class="foo-small" />
<img src="https://cdn.com/image/3.jpg" class="foo-horizontal" />
<img src="https://cdn.com/image/4.jpg" class="foo-vertical" />
</div>
<div class="foo-grid-img">
<img src="https://cdn.com/image/a.jpg" class="foo-big" />
<img src="https://cdn.com/image/b.jpg" class="foo-small" />
<img src="https://cdn.com/image/c.jpg" class="foo-horizontal" />
<img src="https://cdn.com/image/d.jpg" class="foo-vertical" />
</div>
var fooConf = [['big'],['vertical','big'],['small','small','horizontal'],['vertical','big','horizontal','horizontal'],['vertical','big','horizontal','small','small']];
for (var i = 0; i < components.length; i++) {
// elided
var fooClass = fooConf[components.length-1][i];
if("foo-"+fooClass != fooBig.attr("class")) {
cItem.find('.foo-big').css('display','none');
}
if("foo-"+fooClass != fooSmall.attr("class")) {
cItem.find('.foo-small').css('display','none');
}
if("foo-"+fooClass != fooHorizontal.attr("class")) {
cItem.find('.foo-horizontal').css('display','none');
}
if("foo-"+fooClass != fooVertical.attr("class")) {
cItem.find('.foo-vertical').css('display','none');
}
}
我需要一个最终结果,因为后面呈现为html。
<div class="foo-grid-img">
<img src="https://cdn.com/image/1.jpg" class="foo-big" />
</div>
<div class="foo-grid-img">
<img src="https://cdn.com/image/d.jpg" class="foo-vertical" />
</div>
答案 0 :(得分:2)
根据相关新信息进行了更新:
var $imageDivs = $('div.foo-grid-img'); //grab all sets
//iterate over all sets and remove images that dont belong in the corrensponding fooConf[i]
for(var i = 0; i < fooConf.length; i++) {
$imageDivs[i].find('img').each(function(){
var $this = $(this);
var className = $this.attr('class');
if(!$.inArray(className.replace('foo-', ''), fooConf[i])){
$this.hide(); //or remove()
}
});
}
答案 1 :(得分:0)
在按类定位时,您只能设置一个元素的样式,只需给出它的索引即可。如果您只想隐藏它并稍后重新显示它,我建议.toggle(),否则如果您只想删除它,那么使用.remove()应该可以。
for (var i = 0; i < components.length; i++) {
// elided
if("foo-"+fooClass != fooBig.attr("class")) {
cItem.find('.foo-big')[i].toggle();
}
if("foo-"+fooClass != fooSmall.attr("class")) {
cItem.find('.foo-small')[i].toggle();
}
if("foo-"+fooClass != fooHorizontal.attr("class")) {
cItem.find('.foo-horizontal')[i].toggle();
}
if("foo-"+fooClass != fooVertical.attr("class")) {
cItem.find('.foo-vertical')[i].toggle();
}
}