Jquery $('class', this) 选择器不起作用

Question

您好，我是 jquery 的新手，但我无法工作。

我正在尝试使用 .click 函数转换 div：

JQUERY

$(document).ready(function(){
$('#show').click(function(){
    $('.element', this).toggleClass('hidden');
    $(".change-width", this).toggleClass(' col-md-12 ');
    $(".change-width", this).toggleClass('col-md-3');
    $(".blok", this).toggleClass('same-height').toggleClass('h100');
    if($(this).hasClass('SeeMore2')){
        $(this).html('<i class="fa fa-angle-double-left" aria-hidden="true"></i> Terug naar overzicht');
    } else {
        $(this).html('Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i>');
    }
});
});

HTML：

<div class="blokk change-width col-md-3 ">
 <div class="blok same-height ">

   <i class="fa fa-user-md fa-4x" aria-hidden="true"></i>

   <h3>Hoofdpijn</h3>
   <img class="element hidden" src="../images/behandelingen/headache.jpg">

   <p>text</p>

   <p class="element hidden">text</p>
 </div>
 <button id="show" onclick="fastScroll(document.getElementById('navigationz'))">Lees meer <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
</div>

在没有 ,this 选择器但没有 ,this 的情况下它会以某种方式工作，它将选择我显然不想要的所有 div。

谁能告诉我我做错了什么？

提前致谢:)

Answer 1

我不相信$('.element', this) 是有效的语法。

或者，您应该将 DOM 选择器相对于$(this) 定向，就像树遍历一样。例如，在您的情况下，$(this) 引用 id 为 show 的按钮（因为它附加到点击处理程序）。

因此，要访问.change-width，您需要访问$(this) 的父级。也就是说，替换

 $(".change-width", this).toggleClass(' col-md-12 ');

与

 $(this).parent(".change-width").toggleClass(' col-md-12 ');

再举一个例子，如果你想访问.blok，找到那个元素和$(this)之间的关系。 .block 是 this 元素的前一个兄弟。因此替换

$(".blok", this).toggleClass('same-height').toggleClass('h100');

与

$(this).prev(".blok").toggleClass('same-height').toggleClass('h100');

最后，您想访问.element。我看到你有 2 个.elements，而且他们都是.blok 的孩子。换句话说，.elements 是$(this) 的前一个兄弟姐妹的孩子。因此替换

$('.element', this).toggleClass('hidden');

与

$(this).prev(".blok").children(".element").toggleClass('hidden');

这里有一些关于这些函数的 jQuery 文档： https://api.jquery.com/category/traversing/tree-traversal/