如何使用jQuery扩展/折叠嵌套的div
我使用jQuery进行扩展/折叠，在第一级工作正常：
这是我的剃刀档案：
@model IntDashMakeRecAssgnmntsPoRespMngrVM
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (@Model.Audits.Count())</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
@foreach (var audit in Model.Audits)
{
<div>
<i id="expandRecommendations@(audit.AuditID)" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations@(audit.AuditID)" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>@audit.AuditAcnCd</b></span>
<div id="RecommendationDiv@(audit.AuditID)" style="margin-left:40px;padding:5px;border:0px dotted black">
@foreach(var finding in audit.Findings)
{
foreach(var rec in finding.Recommendations)
{
<div style="display:none;">
<a asp-controller="InternalRecommendations" asp-action="Details" asp-route-id="@rec.RecommendationId"
title="Make assignment for @audit.AuditAcnCd">
<b>@audit.AuditAcnCd/@finding.FindingCd/@rec.RecCd</b>
</a>
</div>
}
}
</div>
</div>
}
</div>
</div>
这是我的jQuery：
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").click(function () {
$("#MakeRecommendationAssignmentsDiv").toggle();
$("#collapseMakeRecAssignments, #expandMakeRecAssignments").toggle();
});
使第一级扩展和折叠非常简单。
但是现在我需要扩展div中嵌套的3个新显示的div来展开。
这是我写的jQuery，试图扩展内部div。
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
console.log(this.id);
console.log(parseInt(this.id.replace(/[^0-9\.]/g, ''), 10));
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
expandNodeDivId = "RecommendationDiv" + expandNodeId;
console.log("#" + expandNodeDivId)
$("#" + expandNodeDivId).click(function (e) {
$("#" + expandNodeDivId).toggle();
});
});
在这一行： var expandNodes = $（'i [id ^ =“expandRecommendations”]'）; 我得到了所有我的i标签，它们有一个字体很棒的类（圆圈中的+号）作为展开按钮。
现在，我浏览expandNodes集合中的每个“+ in a circle”按钮，并获取我在服务器端使用剃刀构建的每个分配的唯一ID（
<div id="RecommendationDiv@(audit.AuditID)" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
并尝试向每个人添加一个点击事件以切换自己，该事件应该显示自己并且锚点div嵌套在自身内部：
但它不会扩展。
以下是console.logs，显示我正在调用要扩展的元素的正确ID：
这些console.log行显示我正在获取写入信息以尝试连接它但我无法让它们扩展：
expandRecommendations279938 // the div I clicked on
279938 // able to parse the audit id from the id of the element I clicked on.
#RecommendationDiv279938 // concatenated the Text part of the element I want to expand with the id for the second part of the element to expands id.
有人在这看到问题吗？任何帮助将不胜感激。
更新1
以下是从服务器端生成的HTML源代码。
<div style="border:1px dotted blue;padding:5px">
<div>
<i class="fa fa-user-circle"></i> <i class="fa fa-user-circle"></i>
</div>
<i id="collapseMakeRecAssignments" title="Show Make Recommendation Assignments" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="expandMakeRecAssignments" title="Hide Make Recommendation Assignments" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px">Make Recommendation Assignment for POs and Responsible Manager (3)</span>
<div id="MakeRecommendationAssignmentsDiv" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<i id="expandRecommendations279938" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279938" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOIGFinding1</b></span>
<div id="RecommendationDiv279938" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4581">
<b>testOIGFinding1/4/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4582">
<b>testOIGFinding1/4/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4573">
<b>testOIGFinding1/7/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4574">
<b>testOIGFinding1/7/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4575">
<b>testOIGFinding1/7/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4576">
<b>testOIGFinding1/7/4</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4577">
<b>testOIGFinding1/7/5</b>
</a>
</div>
<div>
<a title="Make assignment for testOIGFinding1" href="/InternalRecommendations/Details/4578">
<b>testOIGFinding1/7/6</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279939" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279939" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>testOCFOFinding1</b></span>
<div id="RecommendationDiv279939" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4579">
<b>testOCFOFinding1/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4583">
<b>testOCFOFinding1/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4584">
<b>testOCFOFinding1/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for testOCFOFinding1" href="/InternalRecommendations/Details/4585">
<b>testOCFOFinding1/1/4</b>
</a>
</div>
</div>
</div>
<div>
<i id="expandRecommendations279959" title="Show Recommendations Needing Assignment" class="fa fa-plus-circle pull-left" style="display:block;cursor:pointer"></i>
<i id="collapseRecommendations279959" title="Hide Recommendations Needing Assignment" class="fa fa-minus-circle pull-left" style="display:none;cursor:pointer"></i>
<span style="margin-left:2px"><b>TestOigAllRecommendations</b></span>
<div id="RecommendationDiv279959" style="display:none;margin-left:40px;padding:5px;border:0px dotted black">
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4586">
<b>TestOigAllRecommendations/1/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4587">
<b>TestOigAllRecommendations/1/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4588">
<b>TestOigAllRecommendations/1/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4589">
<b>TestOigAllRecommendations/2/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4590">
<b>TestOigAllRecommendations/2/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4591">
<b>TestOigAllRecommendations/2/3</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4592">
<b>TestOigAllRecommendations/3/1</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4593">
<b>TestOigAllRecommendations/3/2</b>
</a>
</div>
<div>
<a title="Make assignment for TestOigAllRecommendations" href="/InternalRecommendations/Details/4594">
<b>TestOigAllRecommendations/3/3</b>
</a>
</div>
</div>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
我明白了。
以下是修订后的JavaScript：
// Wire up dynamic toggle
var expandNodes = $('i[id^="expandRecommendations"]');
expandNodes.each(function (index) {
expandNodeId = parseInt(this.id.replace(/[^0-9\.]/g, ''), 10);
create_expand_toggle(expandNodeId);
});
function create_expand_toggle(nodeId) {
$("#" + "expandRecommendations" + nodeId).click(function (e) {
console.log("Clicking");
$("#" + "RecommendationDiv" + nodeId).toggle();
});
}
我在按钮点击时引用了我想要展开的相同div。我需要对i标签进行第二次引用，使用字体awesome + class作为连接点击事件的按钮。
一次提示。我尝试为两个节点id引用创建一个var并使用它们，这样它就更具可读性。但是那个级别上所有三个加号的点击事件显示相同的div。最后一个div。所以我必须在create_expand_toggle函数中连接id。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？