我正在 Wordpress MU 网站上开发，其中包含 PHPBB3 论坛，该论坛已合并到该网站中。在网站上有一个页面，它利用 SimpleModal OSX Style Modal Dialog 查询一些网站用户数据。我还使用了一个插件，允许您为每个名为 Cimy User Extra Fields 的用户创建自定义元信息。在我详细讨论这个问题之前，我想确保我对我的解释很透彻，因为显然我以前没有。
解决问题..........
问题在于在使用 SimpleModal OSX样式模式对话框 jquery函数的页面上。在此页面上，它查询网站用户数据，并通过PHP中的Foreach sequance;在div列中显示页面上的数据。使用 SimpleModal OSX样式模式对话框的代码部分显示为列中列出的每个用户旁边的按钮。
单击激活“模态”窗口的按钮时;该模态窗口内部是该用户的元数据。存储在每个模态窗口内的数据应该与每个用户匹配。相反，它仅显示在页面上所有模态窗口中在系统中找到的第一个用户的数据。
最初我通过foreach循环运行了该函数，并且存储在MODAL窗口中的结果数据是相同的数据 - 而不是该函数从数据库查询的每个用户都是唯一的。
一个示例是网站上有10个用户，因此foreach循环将在列中列出的此页面上返回4个用户。您可以看到可视化表示here。
如果您正在查看该页面，您会看到列出了4个用户。对于每个用户，它显示他们的头像图像，显示名称，等级，用于查看卡通的按钮，挑战按钮和用于向其发送电子邮件的链接。 View Toons按钮是问题所在。
正如我上面所说的那样，它在模态窗口中反复显示每个按钮的相同数据 - 而不是每个用户唯一的数据。在baba的帮助下 因为剧本的错误，他给了我额头一刻的耳光。不幸的是，我无法让它发挥作用。对不起，巴巴不太清楚我做错了什么。我采用了一种不同的方法，我感觉到了＃34;对我的新手来说可能是一个更容易的解决方案。
正如Baba所提到的，问题在于Javascript正在寻找一个特定的ID来调用创建模态窗口的脚本。因为这是一个foreach循环，所以在我目前的情况下它重复View Toons按钮4x。因此，我们有4个按钮，当按下时会弹出一个Modal窗口，其中存储有元数据。单击这4个按钮时，所有四个按钮都显示相同的数据。那么，解决方案呢？我们需要以某种方式随机化每个按钮的ID，并且jquery函数能够识别它需要在每个按钮上激活。
我花了几个小时试图利用巴巴的想法而无法让它发挥作用。所以我在网上更深入挖掘并在stackoverflow上遇到这个问题/答案你可以查看它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字符出现在每个View按钮下方。这些小的红色x字符代表了代码的这一部分：
<div id="osx-modal-content<?php echo $x;?>">
啊！这些是包含每个模态窗口中的元数据的div。为什么红色x出现我没有线索。更奇怪的是当你点击4个视图按钮中的任何一个时。模态窗口不仅没有完全展开，而且就像一个已经拥有的车库门。它有点下降然后再回来。在向下滑动的过程中，您也无法看到元数据。这可能是因为模态窗口没有完全向下扩展。
单击视图卡通按钮后会出现另一个问题。每个“香椿”按钮下方出现的那些小红色x会直接在第一个“视图”按钮下重新定位。现在我在上面列出的osx-modal-content（随机字符串）的DIV.ID。所有这四个div现在都在第一个视图toon按钮下。 WTH ???
那是我在哪里的人。我希望我在使用此代码的正确道路上，我很抱歉Baba我无法让您的解决方案工作，我希望这对于那些愿意帮助理解我和我的人的其他人来说是足够的信息。我正在做。
=============================================== =================================== 更新：正如Pointy提到我在循环中使用ID时应该是Classes，我查看样式表并注意到这行代码：
#osx-modal-content, #osx-modal-data {display:none;}
因为我在＃osx-modal-content的末尾添加了随机的字母数字字符串。它没有注册显示样式：无。我将其添加到代码中：
<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) {
这导致疯狂的，拥有的车库门效应停止。它现在滑出并显示每个用户的元信息。但是，当您单击查看香椿按钮时，它会立即显示框中的所有用户元信息，而不仅仅是所选的＆＃34;用户＆＃34;。此外，当您单击每个按钮时，它会根据该用户ID号以ASC顺序列出用户。
更新3 ：我几乎肯定了为什么Modal窗口显示所有用户信息的问题是因为我设置了通配符。它基于任何以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();
});
答案 0 :(得分：1)
变量$ ret似乎不包含任何东西？
1-请在您的LI周围使用UL 2-请使用类而不是ID
所以，我不太确定你用随机数想要实现什么，我不知道overlayId和containerId应该引用什么，但这看起来像是一种更好的做事方式： / p>
<?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'] . '" alt="" /></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'] . '" alt="" />';?></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>