我遇到了一些我写过的jQuery的小问题。 我有两个按钮，它们下面都有一个隐藏的div。单击该按钮时，使用slideDown或slideUp将相应的div设置为动画或视图之外的动画。 我遇到的问题是当调用slideUp时（隐藏div）它也隐藏了按钮。这是不正确的，因为按钮需要保持原样，只有带有表格的div需要动画。
我在下面创建了一个jFiddle来更好地解释我的意思：
这是我的代码：
HTML：
<div id="rightContent">
<div class="" id="yourAssessments">
<h3>Your Assessments</h3>
<div class="innerPadding">
<h4>Please choose an assessment: </h4>
<div class="onlineModuleAssessmentWrapper">
<div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
<div data-assessment-id="1" class="assessmentTableWrap">
<table>
<tr>
<td>
Planning </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Doing It </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Learning and Communication Styles/Techniques </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Debrief </td>
<td>
Compelted
</td>
</tr>
</table>
</div>
</div>
<div class="onlineModuleAssessmentWrapper">
<div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
<div data-assessment-id="3" class="assessmentTableWrap">
<table>
<tr>
<td>
Planning </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Doing It </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Learning and Communication Styles/Techniques </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Debrief </td>
<td>
Compelted
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
jQuery的：
jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function () {
var linkedAssessmentId = jQuery(this).attr("data-assessment-id");
if (jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow");
} else {
jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");
}
});
有人能看出为什么会这样或我出错的地方吗？ 谢谢！
答案 0 :(得分：1)
您的容器和“按钮”中具有相同的data-assessment-id，因此jquery会同时隐藏它们。检查一下：http://jsfiddle.net/nH5N7/4/
jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", '.assessmentButton', function() {
var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
linkedAssessmentId++
console.log(linkedAssessmentId)
if(jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").is(":hidden")) {
jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideDown("slow");
} else {
jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").slideUp("slow");
}
});
HTML：
<div id="rightContent">
<div class="" id="yourAssessments">
<h3>Your Assessments</h3>
<div class="innerPadding">
<h4>Please choose an assessment: </h4>
<div class="onlineModuleAssessmentWrapper">
<div class="assessmentButton" data-assessment-id="1">Swim Instructor Default</div>
<div data-assessment-id="2" class="assessmentTableWrap">
<table>
<tr>
<td>
Planning </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Doing It </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Learning and Communication Styles/Techniques </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Debrief </td>
<td>
Compelted
</td>
</tr>
</table>
</div>
</div>
<div class="onlineModuleAssessmentWrapper">
<div class="assessmentButton" data-assessment-id="3">Test Assessment 3</div>
<div data-assessment-id="4" class="assessmentTableWrap">
<table>
<tr>
<td>
Planning </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Doing It </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Learning and Communication Styles/Techniques </td>
<td>
Compelted
</td>
</tr>
<tr>
<td>
Debrief </td>
<td>
Compelted
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
当你运行'隐藏'代码时，你在按钮上运行它，而不是之后的div。
小提琴更新：http://jsfiddle.net/nH5N7/6/
jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next().slideUp("slow");
更改上面的行，并在...
中添加了'.next（）'答案 2 :(得分：0)
首先，确保您的ID是唯一的（也许您甚至可以摆脱所有ID）。然后，这应该做的工作：
jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
jQuery(this).next(".assessmentTableWrap").slideToggle();
});
答案 3 :(得分：0)
我建议您将代码更改为：
jQuery(".assessmentTableWrap").hide();
jQuery("#yourAssessments").on("click", ".assessmentButton", function () {
$(this).closest(".onlineModuleAssessmentWrapper")
.find(".assessmentTableWrap")
.slideToggle();
});
这将获取包含当前单击按钮的父包装器，然后在该公共容器中找到.assessmentTableWrap，然后切换它的幻灯片状态。您不必在HTML中放置所有这些data-assessment-id属性来执行此操作。进入普通父级而不是仅仅使用.next()会使代码更少依赖于您的确切HTML（例如，如果在某处插入另一个div，将来不太可能中断）。
此代码还为委派事件处理选择了更有效的父代（最好不要将它们全部放在document上）。
答案 4 :(得分：0)
以上所有答案都是正确的。
如果您需要使用＆＃34; linkedAssessmentId＆＃34;
进行捕获，另一种可能对您有所帮助的方式jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
jQuery("div[data-assessment-id=" + linkedAssessmentId + "]").next(".assessmentTableWrap").slideToggle();
});
或
jQuery(".assessmentTableWrap").hide();
jQuery(document).on("click", ".assessmentButton", function () {
var linkedAssessmentId = jQuery(this).attr("data-assessment-id") ;
$(this).next("div[data-assessment-id=" + linkedAssessmentId + "]").slideToggle();
});