Foreach 循环中奇怪的 SimpleMODAL OSX 动作
Posted
技术标签:
【中文标题】Foreach 循环中奇怪的 SimpleMODAL OSX 动作【英文标题】：Bizarre SimpleMODAL OSX actions in Foreach Loop 【发布时间】：2012-04-24 23:55:56 【问题描述】：我正在开发一个 Wordpress MU 网站，其中包含一个合并到该网站的 PHPBB3 论坛。在网站上，有一个页面利用 SimpleModal OSX 样式模式对话框 来查询一些网站用户数据。我还使用了一个插件，它允许您为每个名为 Cimy User Extra Fields 的用户创建自定义元信息。在我详细讨论问题之前，我想确保我的解释很彻底，因为显然我以前没有。
解决问题............
问题在于页面上使用了SimpleModal OSX Style Modal Dialog jquery函数。在此页面上，它查询网站用户数据，并通过 php 中的 Foreach 序列；在 div 列中显示页面上的数据。利用 SimpleModal OSX 样式模式对话框 的代码部分显示为列中列出的每个用户旁边的按钮。
当您单击激活模态窗口的按钮时；该模式窗口内部是该用户的元数据。每个模态窗口中存储的数据应该与每个用户匹配。相反，它只显示它在系统中找到的第一个用户的数据，跨越页面上的所有模式窗口。
最初我通过 foreach 循环运行该函数，并且存储在 MODAL 窗口中的结果数据是相同的数据 - 而不是函数从数据库查询的每个用户都是唯一的。
例如，网站上有 10 个用户，因此 foreach 循环将返回此页面上列在列中的 4 个用户。您可以看到视觉表示here。
如果您正在查看该页面，您会看到列出了 4 个用户。对于每个用户，它会显示他们的头像图像、显示名称、排名、一个查看卡通的按钮、一个挑战按钮和一个发送电子邮件的链接。查看卡通按钮是问题所在。
正如我上面所说的，它在模式窗口中一遍又一遍地为每个按钮显示相同的数据 - 而不是每个用户唯一的数据。在baba的帮助下 他给了我一记耳光，告诉我剧本出了什么问题。不幸的是，我无法让它工作。对不起，爸爸不太确定我做错了什么。我采用了一种不同的方法，我“觉得”这对于我的新手来说可能是一个更简单的解决方案。
正如 Baba 所提到的，问题在于 javascript 正在寻找一个特定的 ID 来调用创建模式窗口的脚本。因为这是一个 foreach 循环，所以在我目前的情况下，它会重复 View Toons 按钮 4 次。因此，我们有 4 个按钮，当按下它们时会弹出一个模态窗口，其中存储了元数据。单击这 4 个按钮时，所有四个按钮都显示相同的数据。那么，解决方案呢？我们需要以某种方式随机化每个按钮的 ID，并且 jquery 函数能够识别它需要在每个按钮上激活。
我花了几个小时试图利用 Baba 的想法，但无法让它发挥作用。所以我在网上挖得更深，在***上发现了这个问题/答案，你可以查看here。我遇到的问题完全相同，SimpleModal 的开发人员提供了答案。唯一的问题是答案是基于已经存在的 ID，而不是在循环中自动创建的 ID.....
我的解决方案.......
我需要一种方法来生成随机的数字和字母字符串。我找到了这个解决方案here。我是如何将它实现到我的代码中的：
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
现在我已经在代码中生成了这个随机字符串，我需要一种方法让 Jquery 函数能够使用随机的数字和字母字符串来识别这些 ID。我需要一个通配符.....这是我使用的：
$("[id^=osx-modal-content]").modal(
有了这个，我认为它肯定会起作用！它没有......
奇怪的是，它确实做了一些非常奇怪的事情，我不确定我能否用书面形式很好地解释它，如果你在我尝试解释它时直观地查看它产生的结果会更好。您可以查看页面here。
所以这些小红色 x 字符出现在每个查看按钮下方。这些红色的小 x 字符代表这部分代码：
<div id="osx-modal-content<?php echo $x;?>">
啊！这些是包含每个模式窗口中元数据的 div。为什么出现红色 x 我不知道。更奇怪的是，当您单击 4 个查看按钮中的任何一个时。模态窗口不仅没有完全展开，而且就像一扇被附身的车库门。它下降了一点，然后又回到了原点。在它向下滑动的过程中，您也看不到元数据。这可能是因为模态窗口没有完全向下展开。
然后点击查看卡通按钮后又出现了一个问题。出现在每个卡通按钮下方的那些小红色 x 将自己重新定位在第一个查看卡通按钮下方。现在是我上面列出的 osx-modal-content(random string) 的 DIV.ID。所有这四个 div 现在都位于第一个视图卡通按钮下。哇？？？
这就是我对伙计们的看法。我希望我使用这段代码走在正确的道路上，对不起，爸爸，我无法让你的解决方案发挥作用，我希望这对其他愿意帮助理解我在做什么的人来说是足够的信息。
================================================ ==================================== 更新：正如 Pointy 提到的，当 ID 应该是 Classes 时，我在循环中使用了 ID，我查看了样式表并注意到这行代码：
#osx-modal-content, #osx-modal-data display:none;
因为我在#osx-modal-content 的末尾添加了随机字母数字字符串。它没有注册 display:none 的样式。我将此添加到代码中：
<div id="osx-modal-content<?php echo $x;?>" style="display:none">
这让那些讨厌的小红 x 消失了。谢谢你的尖尖！我目前正在尝试更改循环中的 DIV 的相应 ID/类 - 看看这是否会有所作为。
更新 2：我在 jquery 函数中更改了第 18 行，原来是这样的：
$("osx").click(function (e)
到这里：
$("[id^=osx]").click(function (e)
这导致疯狂的附体车库门效应停止。它现在滑出并显示每个用户的元信息。但是，当您单击“查看卡通”按钮时，它现在会在框中显示所有用户元信息，而不仅仅是选定的“用户”。此外，当您单击每个按钮时，它会根据用户 ID 号按 ASC 顺序列出用户。
更新 3：我几乎肯定模态窗口显示所有用户信息的问题是因为我设置了通配符。它基于任何以 osx-modal-content 开头的 div 打开，这将导致它显示每个用户的元信息。我需要 jquery 函数的不同解决方案。
那些愿意看看这个并帮助我的人。我在下面列出了完整的代码、查询函数和 Jquery 函数：
查询网站用户元数据的自定义功能：
<?php
function roster()
$members = get_users('blog_id=15&exclude=array(1)');
foreach ($members as $user)
$item['login'] = $user->display_name;
$item['email'] = $user->user_email;
$item['picture'] = get_cimyFieldValue($user->ID, 'picture');
$item['rank'] = get_cimyFieldValue($user->ID, 'guild_rank');
$item['game'] = get_cimyFieldValue($user->ID, 'game');
$item['avatar'] = get_cimyFieldValue($user->ID, 'avatar');
$item['toon_name'] = get_cimyFieldValue($user->ID, 'character_name');
$item['faction'] = get_cimyFieldValue($user->ID, 'faction');
$item['class'] = get_cimyFieldValue($user->ID, 'class');
$item['role'] = get_cimyFieldValue($user->ID, 'role');
unset($members);
return $ret;
?>
从函数调用的每个用户的循环：
<?php
$ret = roster();
if ( ! empty($ret))
foreach($ret as $v)
?>
<div id = "roster_container">
<div id="left_col">
<div id="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" /></li>';?>
</div>
<div id="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div id="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div id="right_col">
<div id="first_right_col">
<h4>Toons</h4>
<li>
<div id='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx<?php echo $x;?>" value="View" class="osx<?php echo $x;?>" id="osx<?php echo $x;?>"/>
</div>
<div id="osx-modal-content<?php echo $x;?>" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div id="osx-modal-data">
<div id="toon_title">Game Characters</div>
<div id="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div id="toon_box">
<div id="toon_name"><?php echo $v['toon_name'];?></div>
<div id="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" />';?></div>
<div id="toon_faction"><?php echo $v['faction'];?></div>
<div id="toon_class"><?php echo $v['class'];?></div>
<div id="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</div>
<div id="second_right_col">
<h4>Challenge</h4>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</div>
<div id="third_right_col">
<h4>Email</h4>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</div>
</div>
</div>
<?php
?>
最后是 SimpleModal OSX 样式的模态对话框 Jquery：
/*
* SimpleModal OSX Style Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: osx.js 238 2010-03-11 05:56:57Z emartin24 $
*/
jQuery(function ($)
var OSX =
container: null,
init: function ()
$("[id^=osx]").click(function (e)
e.preventDefault();
$("[id^=osx-modal-content]").modal(
overlayId: 'osx-overlay',
containerId: 'osx-container',
closehtml: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
);
);
,
open: function (d)
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function ()
$("[id^=osx-modal-content]", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function ()
setTimeout(function ()
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
height: h,
200,
function ()
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
);
, 300);
);
)
,
close: function (d)
var self = this; // this = SimpleModal object
d.container.animate(
top:"-" + (d.container.height() + 20),
500,
function ()
self.close(); // or $.modal.close();
);
;
OSX.init();
);
【问题讨论】：
一个问题：任何特定的“id”字符串只能在页面上使用一次。也就是说，每个元素的“id”属性应该是unique。您在循环中创建 HTML 并一遍又一遍地使用相同的“id”值。 您可能希望稍微调整一下您的问题。当然，细节很好，但你在这里发布的大部分内容都是叙述性的，与手头的问题并不特别相关。第三、四、五段大多是多余的，第二段也有点可疑。 @Pointy：感谢您“指出”这一点：P。当我查看 css 部分时，我注意到内容默认为不显示。由于我向 div id osx-modal-content 添加了一个随机字符串，该字符串删除了显示：无默认值，这就是导致红色 x 出现的原因。通过添加内联样式，它删除了 X，感谢 :) @Ben 是的，你是对的。我打字的速度往往比我说 IRL 的速度快，而且众所周知，我只是打出我的想法而不去思考它。我已经更新了问题。 您可能还希望删除更新前部分末尾的段落，在该段落中，您基本上调用了网站上的五个相对资深的用户。它唯一可能实现的就是与人们对抗，而且很可能在任何情况下都不会被这些人直接看到。 【参考方案1】：变量 $ret 似乎不包含任何内容？
1- 请在您的 LI 周围使用 UL 2-请使用类而不是 ID
所以，我不太确定你想用随机数实现什么，我不知道 overlayId 和 containerId 应该指什么，但这看起来是一种更好的做事方式：
<?php
$ret = roster();
if ( ! empty($ret))
foreach($ret as $v)
?>
<div class="roster_container">
<div class="left_col">
<div class="first_left_col">
<h4>Avatar</h4>
<?php echo '<li><img src="' . $v['picture'] . '" /></li>';?>
</div>
<div class="second_left_col">
<h4>Username</h4>
<?php echo '<li>' . $v['login'] . '</li>';?>
</div>
<div class="third_left_col">
<h4>Rank</h4>
<?php echo '<li>' . $v['rank'] . '</li>';?>
</div>
</div>
<div class="right_col">
<div class="first_right_col">
<h4>Toons</h4>
<ul>
<li>
<div class='osx-modal'>
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
<input type="button" name="osx" value="View" class="osx" class="osx"/>
</div>
<div class="osx-modal-content" style="display:none;">
<div class="close"><a href="#" class="simplemodal-close">x</a></div>
<div class="osx-modal-data">
<div class="toon_title">Game Characters</div>
<div class="toon_game">
<?php echo '<h3>' . $v['game'] . '</h3>';?>
</div>
<div class="toon_box">
<div class="toon_name"><?php echo $v['toon_name'];?></div>
<div class="toon_avatar"><?php echo '<img src="' . $v['avatar'] . '" />';?></div>
<div class="toon_faction"><?php echo $v['faction'];?></div>
<div class="toon_class"><?php echo $v['class'];?></div>
<div class="toon_role"><?php echo $v['role'];?></div>
</div>
<p><button class="simplemodal-close">Close</button></p>
</div>
</div>
</li>
</ul>
</div>
<div class="second_right_col">
<h4>Challenge</h4>
<ul>
<?php echo '<li><a href="#" class="CHALLENGE">Challenge</a></li>';?>
</ul>
</div>
<div class="third_right_col">
<h4>Email</h4>
<ul>
<?php echo '<li><a href="mailto:' . $v['email'] . '"><img src="http://conspirators.websitedesignbyneo.com/wp-content/themes/conspirators/css/dark-red/img/email-icon.gif" style="height:15px;width:20px;margin-top:5px;margin-left:7px;"></a></li>';?>
</ul>
</div>
</div>
</div>
<?php
?>
<script>
jQuery(function ($)
var OSX =
container: null,
init: function ()
$("[name=osx]").click(function (e)
e.preventDefault();
$(this).parent().next().modal(
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: null,
minHeight: 80,
opacity: 65,
position: ['0',],
overlayClose: true,
onOpen: OSX.open,
onClose: OSX.close
);
);
,
open: function (d)
var self = this;
</script>
【讨论】：
我生成随机类名的目的是，当单击按钮时，它不会显示相同的元数据。现在，无论单击哪个按钮； jquery 遍历 DOM 并拉出第一个 div。在我的情况下是 input.osx div，当单击按钮时，它会穿过 dom 并使用 osx-modal-content 的第一次出现。由于该功能会吸引网站的用户。页面上的按钮数量将会改变。所以我们需要唯一的类名。上面使用 .closest() 的方法提供了同样的问题。它一遍又一遍地列出相同的数据。谢谢你的帮助。 我确实修复了 ID 并将它们更改为类名。我不知道总是会选择第一个 ID。当然，当将所有内容更改为类名而不是模式窗口时，总是显示第一个循环。它现在显示所有循环。所以需要一个唯一标识符解决方案或其他方法。 抱歉，最近很笨，根据我上次的编辑尝试使用 parent().next() 太棒了！好工作站立。效果很好！现在来弄清楚如何实现PVP挑战系统。非常感谢您对此提供的帮助。以上是关于Foreach 循环中奇怪的 SimpleMODAL OSX 动作的主要内容，如果未能解决你的问题，请参考以下文章