javascript - this-parent 和 this 的问题

Question

我正在尝试用 jquery 做一个小测验。因此，我将有几个 div block ，每个 block 有 2 个 li 元素(一个表示是，一个表示否)。单击这些 li 元素之一会更新变量，提供视觉反馈并切换当前 div 和下一个 div 的显示。这就是计划。

我确实使用了这个js代码:

var ergebnis = 0;
$(this).click(function () {
    console.log(this.className);
    if ($(this).hasClass("ja")) {
        ergebnis++;
        $(".ergebnis").html(ergebnis);
        console.log(ergebnis);
    } else {
        ergebnis = ergebnis + 5;
        $(".ergebnis").html(ergebnis);
        console.log(ergebnis);    
    }
    //Styles updaten
    $("#frage__1 li").not(this).css({
        opacity: '0.2',
        transition: '1s'
    });
    $(this).css({
        background: 'green',
        transition: '1s'
    });
    $("#frage__1").slideToggle("slow", function () {});
    $("#frage__2").slideToggle("slow", function () {});
});

这个 html 代码:

<!-- Frageblock 1 -->
       <div id="frage__1" class="frage">
        <h2>1. So you ever wanted to get alongside?</h2>
        <ul>
            <li class="ja"><h3>Yes</h3><p>Extra Text</p></li>
            <li class="nein"><h3>Nope</h3><p>Extra Text 2</p></li>
        </ul>
        </div>

              <!-- Frageblock 2 -->
       <div id="frage__2" class="frage">
        <h2>2. So you ever wanted to get alongside?</h2>
        <ul>
            <li class="ja"><h3>Yes</h3><p>Again text</p></li>
            <li class="nein"><h3>Nope</h3><p>And another one</p></li>
        </ul>
        </div>

所以你可能已经看到这并不是真正的功能，因为我总是需要手动切换代码末尾的所有 div block ；目前只能从 else 部分得到结果。控制台还在一开始就将我记录为“未定义”，并且无论我单击什么，我的结果总是更新为 5。

所以我正在寻找一个解决方案，如何在代码的最后准确使用 this.parent() 和 not(this).parent 之类的东西，以及我一开始用“this”做错了什么

非常感谢!

Answer 1

我会尝试做这两个小改变。首先从以下内容更改点击处理程序上的选择器:

$(this).click(function () {

下面使用 li 元素选择器:

 $("li").click(function () {
     $li =  $(this); //save a reference of the clicked li element

上面还保存了对单击的 li 元素的引用。使用 $li 您可以通过以下两种方式获取祖 parent div 引用来更改 css:

 $li.parent().parent().css({
        background: 'green',
        transition: '1s'
 });

替代方案:

 $li.closest("div").css({
        background: 'green',
        transition: '1s'
  });

有关 .parent() 的更多信息和 .closest()方法。我希望这会有所帮助:-)