使用数组和迭代或 jquery each() 打开一个新对话框并关闭任何其他打开的对话框答案

【问题标题】：Using array and iteration or jquery each() to open a new dialog and close any others that are open使用数组和迭代或 jquery each() 打开一个新对话框并关闭任何其他打开的对话框
【发布时间】：2015-03-03 01:52:53
【问题描述】：

在此示例中，我有 5 个对话框，可以通过将鼠标悬停在缩略图和文本链接上来打开它们。光标离开缩略图图像或文本后，打开的对话框不会立即关闭 - 它会保持打开状态，直到光标移到另一个缩略图或链接上。在打开一个新对话框之前，该函数会检查其他对话框是否可见，然后关闭它们，如果要打开的对话框已经可见，则什么也不做。一切正常，但我计划最多有 25 个对话框，所以我想缩短代码。有人可以告诉我如何把它变成一个数组和迭代，或者 jquery each() 函数。我敢肯定这很简单，但我是新手，无法从文档中弄清楚。

function Close01() {if($(vid01).is(":visible")){vid01.dialog('close');}}
function Close02() {if($(vid02).is(":visible")){vid02.dialog('close');}}
function Close03() {if($(vid03).is(":visible")){vid03.dialog('close');}}
function Close04() {if($(vid04).is(":visible")){vid04.dialog('close');}}
function Close05() {if($(vid05).is(":visible")){vid05.dialog('close');}}

function Open01() {if($(vid01).is(":visible")===false){ vid01.dialog('open'); vid01.load(content01);}}
function Open02() {if($(vid02).is(":visible")===false){ vid02.dialog('open'); vid02.load(content02);}}
function Open03() {if($(vid03).is(":visible")===false){ vid03.dialog('open'); vid03.load(content03);}}
function Open04() {if($(vid04).is(":visible")===false){ vid04.dialog('open'); vid04.load(content04);}}
function Open05() {if($(vid05).is(":visible")===false){ vid05.dialog('open'); vid05.load(content05);}}

function hovIn01() {Close02(); Close03(); Close04(); Close05(); Open01()}
function hovIn02() {Close01(); Close03(); Close04(); Close05(); Open02()}
function hovIn03() {Close01(); Close02(); Close04(); Close05(); Open03()}
function hovIn04() {Close01(); Close02(); Close03(); Close05(); Open04()}
function hovIn05() {Close01(); Close02(); Close03(); Close04(); Open05()}

function hovOutDoNothing() {}

$('.gallery-01').hoverIntent(hovIn01, hovOutDoNothing);
$('.gallery-02').hoverIntent(hovIn02, hovOutDoNothing);
$('.gallery-03').hoverIntent(hovIn03, hovOutDoNothing);
$('.gallery-04').hoverIntent(hovIn04, hovOutDoNothing);
$('.gallery-05').hoverIntent(hovIn05, hovOutDoNothing);

【问题讨论】：

呃，这么多重复，请学习DRY原则！编写一个带参数的函数。

标签： jquery arrays each

【解决方案1】：

您不需要数组。只需给所有对话框一个类（例如popupstyle）。然后你可以关闭所有这些，除了当前的：

$(".popupstyle:not(#"+currentId+")").dialog("close");

【讨论】：

谢谢，看起来不错！对话框有一种称为“popupstyle”的样式。我添加了这段代码： var currentId = $(this).attr('id'); $(".popupstyle:not(currentID)").dialog("close");但他们保持开放。我还有什么需要补充的吗？
您需要像我在回答中所做的那样连接 ID。变量不会在字符串中被替换。
这是正确的语法吗？: var thisId = $(this).attr('id'); $(".popupstyle:not(#"+thisID+")").dialog("close");
如果和我的回答一样，那我也这么认为。
语法看起来正确，但我的所有对话框都已停止打开。

【解决方案2】：

var arrayOfIds = [];

function closeDialog(dialogId){
    //close the dialog whose ID has been passed
}

function openDialog(dialogId){
    //open the dialog whose ID has been passed
}

function hoverIn(dialogId){
    $.each(arrayOfIds,function(key,val){
         // close everyone else except for the one whose ID has been passed
    });
}

【讨论】：