私は、サイトにマージされたPHPBB3フォーラムを使用してWordpressMUWebサイトで開発しています。Webサイトには、Webサイトのユーザーデータの一部を照会するSimpleModalOSXスタイルのモーダルダイアログを利用するページがあります。また、 Cimy UserExtraFieldsと呼ばれる各ユーザーのカスタムメタ情報を作成できるプラグインを使用しています。問題の詳細に入る前に、明らかに以前にはなかったように、説明を徹底的に行っていることを確認したいと思います。
問題に.........。
問題は、 SimpleModalOSXスタイルのモーダルダイアログjquery関数を利用するページにあるという事実にあります。このページでは、Webサイトのユーザーデータを照会し、PHPでForeachシーケンスを実行します。ページのdiv列内にデータを表示します。SimpleModal OSXスタイルモーダルダイアログを利用するコードの一部は 、列にリストされている各ユーザーの横にボタンとして表示されます。
モーダルウィンドウをアクティブにするボタンをクリックすると、そのモーダルウィンドウの内側には、そのユーザーのメタデータがあります。各モーダルウィンドウ内に保存されたデータは、各ユーザーと一致することになっています。代わりに、ページ上のすべてのモーダルウィンドウでシステム内で最初に見つかったユーザーのデータのみが表示されます。
もともと私はforeachループを介して関数を実行していましたが、MODALウィンドウ内に格納される結果のデータは、関数がデータベースからクエリを実行する各ユーザーに固有ではなく、同じデータです。
たとえば、Webサイトに10人のユーザーがいるため、foreachループは列内にリストされているこのページに4人のユーザーを返します。ここで視覚的な表現を見ることができます。
このページを見ると、4人のユーザーがリストされていることがわかります。ユーザーごとに、アバター画像、表示名、ランク、トゥーンを表示するためのボタン、チャレンジボタン、および電子メールで送信するためのリンクが表示されます。View Toonsボタンは、問題が存在する場所です。
上で述べたように、元々、モーダルウィンドウにボタンごとに同じデータが何度も表示されていましたが、そのデータは各ユーザーに固有のものではありませんでした。ババの助けを借りて、 彼は私に額の瞬間を平手打ちし、スクリプトの何が悪かったのかを教えてくれました。残念ながら、私はそれを動作させることができませんでした。申し訳ありませんが、馬場は私が何を間違っているのかよくわかりません。私は、初心者の心にとってより簡単な解決策かもしれないと「感じた」別のアプローチを採用しました。
Babaが述べたように、問題は、Javascriptがモーダルウィンドウを作成するスクリプトを呼び出すための特定のIDを探しているという事実にあります。これはforeachループであるため、現在の場合、[トゥーンズの表示]ボタンを4回繰り返します。したがって、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（ランダム文字列）のDIV.IDを示します。これらの4つのdivはすべて、最初のビュートゥーンボタンの下にあります。WTH ???
それは私がみんなにいるところです。私はこのコードで正しい道を進んでいることを願っています。申し訳ありませんが、ババはあなたのソリューションを機能させることができませんでした。これが私がしていることを理解するのを助けてくれる他の人にとって十分な情報であることを願っています。
================================================== ================================ 更新：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関数をリストしました。
Webサイトユーザーのメタデータを照会するカスタム関数：
<?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();
});