我正在开发一个MMO“公会”项目,该公会为公会成员随机生成游戏任务。他们可以“阻止”分配三个任务。
列表看起来像这样:
<ul>
<li class="blocked">Task that is blocked</li>
<li class="blocked-open">Click to block a task</li>
<li class="blocked-open">Click to block a task</li>
</ul>
blocked-open
类意味着他们尚未选择要阻止的任务。 blocked
任务意味着他们已经阻止了任务。当他们点击列表项时,我希望它出现:
<ul class="tasks-dropdown no-display">
<li><h1>Click a Task to Block</h1></li>
<ul class="task-dropdown-inner">
<?php
//output all tasks
foreach($tasks as $task) {
echo '<li class="blocked-option"><span id="'.$task.'">'.$task.'</span></li>';
}
?>
<br class="clear" />
</ul>
</ul>
当用户点击.blocked-open
订单项时,我不太清楚如何在 下显示他们点击的下拉菜单。
在我感到困惑之前,我的jQuery看起来像这样。
$("li.blocked-open").click(function() {
$("ul.no-display").slideToggle("900");
});
$(".blocked-option span").click(function() {
var task = $(this).attr('id');
alert("You have blocked: " + task);
location.reload(true);
});
我通过将下拉列表放在代码中的一个订单项下来测试它,并且它工作正常,但是当我在代码中有多个下拉列表时,单击一个订单项会切换所有下拉列表。我不知道该怎么做。 :-P。
答案 0 :(得分:2)
您的问题是由于您目前无法唯一识别要显示的下拉列表以及将其与您单击的项目相关联而导致的。 一种简单的方法,但不是非常灵活,将为每个“阻塞”或“阻塞打开”项目分配一个简单的数字ID。然后给每个下拉列表一个id,例如dropdown_1。然后将代码调整为以下内容:
$("li.blocked-open").click(function() {
var id = $(this).attr("id");
$("#dropdown_"+id).slideToggle("900");
});
我没有对此进行测试,但它应该有效...我认为:)