Question

我有3个选项的测验的以下html代码。我想将课程var getObj = localStorage.getItem('announcement'); var obj = JSON.parse(getObj); for (key in obj) { if(obj[key] !== ''){ alert(key + 'is existed'); }else{ var newValue = document.getElementById(key).value; obj[key] = newValue == '' ? '' : newValue; } } var newObjS = JSON.stringify(obj); localStorage.setItem('announcement', newObjS);添加到.active课程。

.questionItem

目前我有以下代码：

<ul class="questionList">
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li>
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li>
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li>
</ul>

但是，这会向所有$(this).parent().find('.questionItem').addClass('active');添加活动。相反，我想将此类添加到单击的questionItem类中。

Answer 1

我认为以下代码可以为您提供帮助！

$('.questionItem').click(function(){
  $(this).addClass('active').siblings().removeClass('active');
});

Answer 2

看起来this指的是点击的元素，因此只需使用$(this)即可。我添加了一些点击事件来演示this的工作原理。

＆＃13;

$(".questionItem").click(function () {
  $(this).addClass('active');
});

＆＃13;

.active {
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="questionList">
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li>
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li>
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li>
</ul>

＆＃13;

但是，如果您反而尝试选择父级，则无需.find：

＆＃13;

$(".questionItem").click(function () {
  $(this).parent().addClass('active');
});

＆＃13;

.active {
  background:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="questionList">
<li class="questionItem" data-pos="0"><span class="question">Question Text</span></li>
<li class="questionItem" data-pos="1"><span class="question">Question Text</span></li>
<li class="questionItem" data-pos="2"><span class="question">Question Text</span></li>
</ul>

＆＃13;

如何使用Jquery仅将一个活动类添加到一个父元素？

2 个答案: