我正在一个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 个用户。您可以在此处查看可视化表示。
如果您正在查看该页面，您将看到列出了 4 个用户。对于每个用户，它会显示他们的头像图像、显示名称、排名、一个查看卡通的按钮、一个挑战按钮和一个发送电子邮件的链接。查看卡通按钮是问题所在。
正如我上面所说的，它在模态窗口中一遍又一遍地为每个按钮显示相同的数据——而不是每个用户唯一的数据。在爸爸的帮助下， 他给了我一记耳光，说明剧本出了什么问题。不幸的是，我无法让它工作。对不起，爸爸不太确定我做错了什么。我采用了一种不同的方法，我“觉得”这对于我的新手来说可能是一个更简单的解决方案。
正如 Baba 所提到的，问题在于 Javascript 正在寻找一个特定的 ID 来调用创建模式窗口的脚本。因为这是一个 foreach 循环，所以在我目前的情况下，它会重复 View Toons 按钮 4 次。因此，我们有 4 个按钮，当按下它们时会弹出一个模态窗口，其中存储了元数据。单击这 4 个按钮时，所有四个按钮都显示相同的数据。那么，解决方案呢？我们需要以某种方式随机化每个按钮的 ID，并且 jquery 函数能够识别它需要在每个按钮上激活。
我花了几个小时试图利用巴巴的想法，但无法让它发挥作用。因此，我在网上进行了更深入的挖掘，并在 stackoverflow 上遇到了这个问题/答案，您可以在此处查看。我遇到的问题完全相同，SimpleModal 的开发人员提供了答案。唯一的问题是答案是基于已经存在的 id 而不是会在循环中自动创建的 ID .....
我的解决方案.......
我需要一种方法来生成随机的数字和字母字符串。我在这里找到了这个解决方案。我如何将它实现到我的代码中：
<?php
$n = rand(10e16, 10e20);
$x = base_convert($n, 10, 36);
?>
现在我已经在代码中生成了这个随机字符串，我需要一种方法让 Jquery 函数能够使用随机的数字和字母字符串来识别这些 ID。我需要一个通配符.....这是我使用的：
$("[id^=osx-modal-content]").modal({
有了这个，我认为它肯定会起作用！它没......
奇怪的是，它确实做了一些很奇怪的事情，我不确定我是否可以用书面形式很好地解释它，如果你在我尝试解释它时直观地观察它产生的东西会更好。您可以在此处查看该页面。
所以这些小红色 x 字符出现在每个查看按钮下方。这些红色的小 x 字符代表这部分代码：
<div id="osx-modal-content<?php echo $x;?>">
啊! 这些是包含每个模式窗口中元数据的 div。为什么出现红色 x 我不知道。更奇怪的是，当您单击 4 个查看按钮中的任何一个时。模态窗口不仅没有完全展开，而且就像一扇被附身的车库门。它下降了一点，然后又回到了原点。在它向下滑动的过程中，您也看不到元数据。这可能是因为模态窗口没有完全展开。
然后单击查看卡通按钮后会出现另一个问题。出现在每个卡通按钮下方的那些小红色 x 将自己重新定位在第一个查看卡通按钮下方。现在是我上面列出的 osx-modal-content(random string) 的 DIV.ID。所有这四个 div 现在都位于第一个视图卡通按钮下。么么哒？？？
这就是我在伙计们的地方。我希望我使用这段代码走在正确的道路上，很抱歉，爸爸，我无法让您的解决方案正常工作，我希望这对其他愿意帮助理解我在做什么的人来说是足够的信息。
==================================================== ================================ 更新：正如Pointy提到的，当它应该是类时，我在循环中使用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'] . '" alt="" /></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'] . '" alt="" />';?></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();
});