我弄得一团糟。:) 我是 jQuery 的新手。丰富的 PHP 经验。很确定我已经下载了 1/4 的互联网临时文件，试图找到帮助的线索，买了超过 100 美元的书。请帮我学习这个！
这是情况。我正在处理可以编辑信息的页面。此信息按几个不同的级别进行排序。我们有房间和物品。项目可以是房间内的许多不同项目。这些项目被收集起来，然后循环到它们相应的选项卡中，即一个房间。选项卡、表格、行等都在这些循环中处理。此外，我正在尝试设置 jquery 以打开一个对话框来编辑房间内列出的项目。这个对话框最终会有 UI 可排序插件来组织数据。
循环很好用，对话框很好用，甚至是可排序的功能。但是，由于每个选项卡都应该有自己独特的对话框，我知道我需要为每个对象设置一个唯一标识符，我可以在循环中轻松完成，但不知道如何让 jQuery 识别它。
因此，当您单击“编辑”时，每个对话框对象都会出现一个对话框。
处理这个问题的最佳方法是什么？一个jQuery循环？
（我遗漏了一些看起来不相关的东西。对不起，如果语法混乱，我会在它工作后清理。：P）
PHP/HTML
$count = count( $tpl['template'] );
for( $i = 0; $i < $count; $i++ )
{
foreach( $tpl['template'][$i] as $k => $v )
{
if( is_int($k) )
{
unset( $tpl['template'][$i][$k] );
}
}
}
$temprooms = array();
for( $i = 0; $i < $count; $i ++ )
{
foreach( $tpl['template'][$i] as $k => $v )
{
if( $k == "room_name" )
{
if( ! in_array($v, $temprooms, true ) )
{
$temprooms[] = $v;
}
}
}
}
$rooms = array();
foreach( $temprooms as $k => $v )
{
$rooms[$k+1] = $v;
}
?>
<div id="nested-tabs">
<ul>
<?
foreach( $rooms as $k => $v )
{
?> <li><a href="#<?echo $v; ?>"><?echo $v; ?></a></li>
<?
}
?>
</ul>
<?php
krumo( $tpl['template'] );
foreach( $rooms as $these => $those )
{
?>
<div id="<?php echo $those; ?>">
<table class="ebc-table">
<thead>
<tr>
<table class="ebc-table">
<thead>
<tr>
<th class="sub">Component</th>
<th class="sub">U/M</th>
<th class="sub">Clean</th>
<th class="sub">Repair</th>
<th class="sub">Replace</th>
<th class="sub">Upgrade</th>
</tr>
<?
foreach( $tpl['template'] as $k => $v )
{
foreach( $tpl['template'][$k] as $key => $value )
{
if( $key == "room_name" )
{
if( $key != $those )
{
$roomname = $value;
}
}
else{
if( $v['room_name'] == $those )
{
if( $key == "item_name" )
{
?> <tr>
<td><?php echo $value; ?></td>
<?
}
if( $key == "um" )
{
?> <td><?php echo $value; ?></td>
<?
}
if( $key == "GROUP_CONCAT(IC.amt)" )
{
$prices = explode( ",", $value );
foreach( $prices as $index => $price )
{
?> <td><?php echo $price; ?> </td>
<? }
?> </tr> <?
}
}
}
}
}
?>
</thead>
</table>
</tr>
<tr>
<td>
<p>
<label class="title"> </label>
<a href="#" class="room-edit" >Edit</a>
</p>
</td>
</tr>
</thead>
</table>
</div>
<div class="edit-dialog" title="Edit Room">
<table width="100%" height="100%" border="0">
<tr>
<td width="40%">
<p>
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</p>
</td>
<td>
<center>
<br />
<p>
<a href="#" class="add-all">< Add All</a>
</p>
<br />
<p>
<a href="#" class="remove-all">Remove All ></a>
</p>
<p>
<br />
<a href="#" class="reset">Reset</a>
</p>
</center>
</td>
<td width="40%">
<p>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
</p>
</td>
</tr>
</table>
</div>
<?
}
?>
这是我正在尝试使用的脚本片段：
if( $ ('div.edit-dialog').length > 0){
$( 'div.edit-dialog' ).dialog({
autoOpen: false,
height: 500,
height: 500,
width: 550,
modal: true,
position:['middle','middle'],
draggable: true,
resizable: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( 'a.room-edit').click(function() {
$( 'div.edit-dialog' ).dialog( "open" );
});
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
dropOnEmpty: true
}).disableSelection();
$("a.add-all").click(function() {
$("#sortable2 li").appendTo("#sortable1");
});
$("a.remove-all").click(function() {
$("#sortable1 li").appendTo("#sortable2");
});
$("a.reset").click(function(resetall) {
$('#sortable1').html('');
$('#sortable2').html('');
$('#sortable1').html(reset1);
$('#sortable2').html(reset2);
});
var reset1 = $('#sortable1').html();
var reset2 = $('#sortable2').html();
}
如果您需要更多信息，请告诉我。
非常感谢！