您好：我有一个存储在数据库中的团队列表，它们都与一个部门相关联。每个团队都有一个“ div_id”和一个“ team_id”。我有一个jQuery函数（下拉列表），该函数被馈入div_id，然后执行ajax调用以查找该部门的团队并在另一个下拉列表中列出它们。
这一切都起作用；所以我现在想做的基本上是在一个页面上有多个实例。他们都是彼此独立的。所以我想对于这些彼此独立他们将需要成为对象。我已经用PHP完成了对象，但是没有JS。在PHP中，我总是将对象存储在数组中，因此在这里我发现了同样的情况。因此，我尝试将单个工作解决方案转换为可以在页面上多次工作的解决方案。它没有用，所以我正在寻找帮助。我将首先发布“工作中”的单个版本。然后我将发布将其转换为对象的尝试...
这是可用于一组下拉菜单的函数：
$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row) {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select id="comboA" name="<?php echo $function_name; ?>" onchange="G_function1(this)">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
$div_id = $resultsg1[div_id];
$div_name = $resultsg1[div_name];
?>
<option value="<?php echo $div_id; ?>" >
<?php echo $div_name; ?></option>
<?php } ?>
</select>
<div id="<?php echo $div_box_id; ?>" id="id57512">
</div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
function G_function1(sel) {
var value = sel.value;
var answer = value;
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + answer,
dataType: 'html',
success: function(response) {
$("#<?php echo $div_box_id; ?>").html(response);
}
});
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
好了，现在我尝试将其转换为：
$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row) {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
?>
<script>
var jsslot='<?php echo $slot_id; ?>';
</script>
<?php
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select id="comboA" name="<?php echo $function_name; ?>" onchange="person(this)">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
$div_id = $resultsg1[div_id];
$div_name = $resultsg1[div_name];
?>
<option value="<?php echo $div_id; ?>" >
<?php echo $div_name; ?></option>
<?php } ?>
</select>
<div id="<?php echo $div_box_id; ?>" id="id57512">
</div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
function person(div_id,slot_id) {
this.div_id = div_id;
this.slot_id = slot_id;
this.show_teams = function (div_id,slot_id) {
var value = div_id.value;
var answer = value;
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + answer,
dataType: 'html',
success: function(response) {
$("#<?php echo $div_box_id; ?>").html(response);
}
});
}
}
var show_them[slot_id] = new person(div_id,slot_id);
show_them.show_teams(div_id,slot_id);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
所以第二个版本不起作用，所以我希望有人可以帮助我...
********************更新美国东部时间凌晨2:42 ***********************
好的漫游者：这是我根据您的回答给出的新代码：
$gym_id=$_POST['gym_id'];
?>
<style>
#slot_cont1 {width: 100%; height: 50px; border: 1px solid red;}
</style>
<form action="/wp-admin/gc_admin_partial_complete_games.php" method="post" id="submit1" name="submit1" >
<input type="hidden" name="gc_post" value=3>
<?php
$sql = "SELECT * FROM scheduler_slots WHERE gym_id=$gym_id AND status='open' LIMIT 0,3";
foreach ($dbh->query($sql) as $row) {//gxx1
?>
<div id="slot_cont1">
<?php
$slot_date=$row[slot_date];
$slot_start=$row[slot_start];
$slot_id=$row[gc_id];
?>
<script>
var jsslot='<?php echo $slot_id; ?>';
</script>
<?php
$div_box_id="ajax_content-".$slot_id;
$function_name="G_function1-".$slot_id;
echo $slot_date." - ".$slot_start;
?>
<style>
#ajax_content {width: 175px; margin: 15px 0 15px 0; }
#ajax_content a {color: #394f68; text-decoration: underline;}
#ajax_content a:hover {color: black;}
#upper_container {width: 100%;}
</style>
<select class="divisions" name="<?php echo $function_name; ?>">
<option value=""></option>
<?php
$sql = "SELECT * FROM scheduler_divisions ORDER BY gc_order";
foreach ($dbh->query($sql) as $resultsg1)
{
$div_id = $resultsg1[div_id];
$div_name = $resultsg1[div_name];
?>
<option value="<?php echo $div_id; ?>" >
<?php echo $div_name; ?></option>
<?php } ?>
</select>
<div class="teams"></div>
<hr>
</div>
<?php
}// close gxx1
?>
<br style="clear: both;"/>
<br/><br/>
<input type="submit" value="submit" />
</form>
<script>
$(function() {
$("select.divisions").on('change', function() {
var $this = $(this);
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + $this.val(),
dataType: 'html',
success: function(response) {
//find the appropriate teams div relative to `this` select element and stuff the response into it.
$this.nextAll(".teams").html(response);
}
});
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
所以这是我基于R的答案的新代码，但仍然无济于事。因此，如果有人可以提供帮助，将不胜感激...
最佳答案
您似乎不需要做很多事情来解决此问题：
在HTML中，使用类而非ID来标识select元素及其目标div。
确保脚本和链接标记在文档的<head>...</head>中
将onchange处理程序附加到javascript，而不是HTML中。
在onchange处理程序中，遍历DOM以找到相对于正在处理更改事件的select元素的适当团队div。
将脚本包装在$(function() {...});中，以确保在DOM的ready事件触发之前，它不会尝试运行
的HTML
<select class="divisions" name="<?php echo $function_name; ?>">...</select>
<div class="teams"></div>
Java脚本
$(function() {
$("select.divisions").on('change', function() {
var $this = $(this);
$.ajax({
cache: false,
type: 'GET',
url: 'http://scheduler.mydomain.com/gscript6_team_dropdown.php',
data: 'answer=' + $this.val(),
dataType: 'html',
success: function(response) {
//find the appropriate teams div relative to `this` select element and stuff the response into it.
$this.nextAll(".teams").html(response);
}
});
});
});
关于javascript - 需要协助将jQuery单个功能转换为具有多个功能的对象实例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33589486/