javascript - Jquery $ ('class' ，这个)选择器不起作用

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 个 .element，并且它们都是 .blok 的子级。换句话说，.element 是 $(this) 的前一个兄弟元素的子元素。因此替换

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

与

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

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