Question

我正在尝试在jquery中进行一些小测验。所以我将有几个div块，每个2个li元素（一个用于是，一个用于否）。单击其中一个li元素会更新变量，提供视觉反馈并切换当前div和下一个div的显示。那是计划。

我确实使用这个js-code：

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块;目前只从else部分获得结果。控制台一开始也记录我“未定义”，无论点击什么，我总是将结果更新为5。

所以我正在寻找一个解决方案，如何在代码的最后使用this.parent（）以及类似的不是（this）.parent，以及我在“this”开头做错了什么

非常感谢！

Answer 1

我会尝试这两个小改动。首先从点击处理程序更改您的选择器：

$(this).click(function () {

到下面使用li元素选择器的那个：

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

上面还保存了对点击的li元素的引用。使用$li，您可以通过以下两种方式获取更改css的祖父母div参考：

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

替代方案：

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

有关.parent()和.closest()方法的详细信息。我希望这有点帮助： - ）

这个父母和这个问题

1 个答案: