如何在同一点击事件Jquery中获得无序列表中先前点击的列表项

Question

我有一个无序列表，如下所示：

<ul class='learningAreas'>
<li class="caret"><span><img src="/assets/img/rightarrow.png">&nbsp;&nbsp;</span>Performance Art
<ul class='subjectRef'>
<li class="subject ACTIVE" id="PAADLB" data-status="ACTIVE"><a href="#" class="ACTIVE" title="PAADLB">(PAADLB) - Acting & Directing</a></li>
<li class="subject ACTIVE" id="PAATDY" data-status="ACTIVE"><a href="#" class="ACTIVE" title="PAATDY">(PAATDY) - Acting Design</a></li>
</ul>
</li>
<li class="caret"><span><img src="/assets/img/rightarrow.png">&nbsp;&nbsp;</span>Visual Art
<ul class='subjectRef'>
<li class="subject ACTIVE" id="VA2DFAW" data-status="ACTIVE"><a href="#" class="ACTIVE" title="VA2DFAW">(VA2DFAW) - 2D Fine Art</a></li>
<li class="subject ACTIVE" id="VA2DMY" data-status="ACTIVE"><a href="#" class="ACTIVE" title="VA2DMY">(VA2DMY) - 2D Media</a></li>
</ul>
</li>
</ul>

带有类"插入符号"的列表项(学习区域(根据单击展开/折叠到子列表中。

我在列表项之前的范围中有一个右箭头图像当用户点击"确定"按钮时；"学习区"；箭头切换到向下箭头。

我的问题是当用户点击一个新的"；"学习区"；它应该将先前的向下箭头设置为向右箭头；"学习区"；从右箭头到下箭头

CSS工作得很好，我可以点击"；"学习区"；并且当我点击另一个"箭头"时，右箭头切换到下箭头；"学习区"；先前单击的箭头不会改变。

我的CSS就是这个

.rightArrow {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
display: inline-block;
}
.downArrow {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display: inline-block;
}

我的JQuery看起来像这个

$('ul.subjectRef').hide();
$("li > span").addClass("rightArrow"); 

$('.learningAreas > li').click(function(){
$('.caret').not(this).find(".subjectRef").hide();
$(this).find(".subjectRef").toggle();
$(this).find(".rightArrow").toggleClass("downArrow"); 

});

我哪里错了？我尝试过将.hasClass与.addClass和.removeClass结合使用，但只是在兜圈子。不知何故，我需要知道之前点击的项目是什么，并更改其箭头。

任何帮助都将不胜感激谢谢约翰·

Answer 1

我对您的脚本进行了以下调整：

$('.learningAreas > li').click(function() {
// use variables to cache our collections for performance and clarity
const clickedListElement = $(this);
const otherListElements = $('.caret').not(this);
// find the .subjectRef in the other list elements and hide it
otherListElements.find(".subjectRef").hide();
// find the .downArrow classed image in the other list elements and toggle the down arrow class
otherListElements.find(".downArrow").toggleClass("downArrow");
// toggle on the current list item
clickedListElement.find(".subjectRef").toggle();
clickedListElement.find(".rightArrow").toggleClass("downArrow");
});

你可以在下面看到它的作用：

$('ul.subjectRef').hide();
$("li > span").addClass("rightArrow");
$('.learningAreas > li').click(function() {
// use variables to cache our collections for performance and clarity
const clickedListElement = $(this);
const otherListElements = $('.caret').not(this);
// find the .subjectRef in the other list elements and hide it
otherListElements.find(".subjectRef").hide();
// find the .downArrow classed image in the other list elements and toggle the down arrow class
otherListElements.find(".downArrow").toggleClass("downArrow");
// toggle on the current list item
clickedListElement.find(".subjectRef").toggle();
clickedListElement.find(".rightArrow").toggleClass("downArrow");
});

.rightArrow {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
display: inline-block;
}
.downArrow {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class='learningAreas'>
<li class="caret"><span><img src="https://i.imgur.com/APHeUQH.png">&nbsp;&nbsp;</span>Performance Art
<ul class='subjectRef'>
<li class="subject ACTIVE" id="PAADLB" data-status="ACTIVE"><a href="#" class="ACTIVE" title="PAADLB">(PAADLB) - Acting & Directing</a></li>
<li class="subject ACTIVE" id="PAATDY" data-status="ACTIVE"><a href="#" class="ACTIVE" title="PAATDY">(PAATDY) - Acting Design</a></li>
</ul>
</li>
<li class="caret"><span><img src="https://i.imgur.com/APHeUQH.png">&nbsp;&nbsp;</span>Visual Art
<ul class='subjectRef'>
<li class="subject ACTIVE" id="VA2DFAW" data-status="ACTIVE"><a href="#" class="ACTIVE" title="VA2DFAW">(VA2DFAW) - 2D Fine Art</a></li>
<li class="subject ACTIVE" id="VA2DMY" data-status="ACTIVE"><a href="#" class="ACTIVE" title="VA2DMY">(VA2DMY) - 2D Media</a></li>
</ul>
</li>
<li class="caret"><span><img src="https://i.imgur.com/APHeUQH.png">&nbsp;&nbsp;</span>Performance Art
<ul class='subjectRef'>
<li class="subject ACTIVE" id="PAADLB" data-status="ACTIVE"><a href="#" class="ACTIVE" title="PAADLB">(PAADLB) - Acting & Directing</a></li>
<li class="subject ACTIVE" id="PAATDY" data-status="ACTIVE"><a href="#" class="ACTIVE" title="PAATDY">(PAATDY) - Acting Design</a></li>
</ul>
</li>
</ul>

这是有效的，但如果您认为每个操作可能有更多的DOM片段可以随意移动，那么您可能可以将一些行为提取到函数中，以更好地构建它。当用户点击当前打开的项目来切换它时，它将在.otherListElements上进行不必要的迭代