javascript - jQuery For Loop 图像检查和显示

Question

下午好，Stack Overflow，

一般来说，我在编码方面缺乏经验，而且我一直遇到一个让我头疼的问题!

如果你允许我设置场景...

我目前正在从事的项目部分涉及用户从仓库中挑选元素以完成装运，在某些情况下，他们必须从不同地点挑选相同的元素，当需要这样做时，小的 ”!”类型图标出现在项目旁边。

然后用户可以单击该图标并选择他们将从哪些位置检索库存，然后他们在模态上按确认，当它关闭时它会将文本设置回蓝色并隐藏该图标。

我遇到麻烦的部分是，一旦所有位置都已建立，就需要处理订单，这需要单击一个按钮，我只想在所有“!”出现一次时显示该按钮。图标被隐藏。

我知道有很多基于 for 循环和图像检查的问题，请相信我，当我说我已经努力自己解决这个问题并且我尝试了不同的方法时:

ShowProcess = false
for (i = 0; i<Picker; i++) {
if ($('#MultiLocIcon'+i).is(':visible')){
ShowProcess = true
}

if (ShowProcess == true) {
$('#ProcessConfirm').show()
};
};

这显然是行不通的，因为它将列表中的第一个变量设置为“true”并且将始终将其读取为 true，因此始终显示图像，即使“!”图标仍然存在于其他行中。

我还尝试使用 .each() 来测试特定行的每一行文本颜色，但也没有运气:

var table = $('#RequestedItemsTable');
table.find('tbody > tr').each(function(){
if $('#Desc').css('color') == '#0000FF'){
//do something

我觉得我的经历让我很失望，因为我还有很多东西要学，而且我怀疑解决方案会非常简单，但话又说回来，只有你知道怎么做才容易。

如果有人能花时间帮助我解决这个问题或给我任何建议，我将不胜感激。

这是我的一段代码，可能会有用:

模态“确认”按钮:

//CONFIRM Button which will submit final picks.
'Confirm': function() {

//Reset the length loop
length = undefined;

//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();

//Change text colour back to blue to have visual confirmation that item   is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');

$(this).dialog('close');

“!”图标:

<td id= "MultiLocIcon<?=$i;?>"><?if($row->Count_Location > 1)
    {?><img src="<?=base_url();?>public/css/images/error.png" alt="LocPick" title="Multiple Locations" style="cursor: pointer;" id= "icon<?=$i;?>" onClick="$.LocPick(<?=$i;?>);"/><?}?></td>

基本上只需要知道一旦循环检查并知道“!”后我的图像如何显示每个可能的行都隐藏了图标。

感谢您的耐心等待。

Answer 1

您需要在模态逻辑中添加第二次检查，可能在您的 .hide() 之后:

//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
$('img[id^=icon]:visible').length || $('#ProcessConfirm').show();

这样做是将 :visible 伪选择器和正则表达式选择器结合起来，用于所有 img 标签，id 以“icon”开头.这假设您不会有任何其他不相关的图像标签，其 ID 类似于“icon*”。如果长度为 0，它将继续并显示 #ProcessConfirm 元素。