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

Posted 2023-05-09

【中文标题】Jquery $(\'class\', this) 选择器不起作用

【英文标题】：Jquery $('class', this) selector doesn't workJquery $('class', this) 选择器不起作用

【发布时间】：2018-06-16 20:37:33

【问题描述】：

您好，我是 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。

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

提前致谢:)

【参考方案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/

【讨论】：

感谢您回复 gmpatzer！一切正常，我现在有点掌握了窍门，除了一件事。我仍然不知道如何让那个 .element 切换隐藏的类。

当然！我把它省略了，看看你是否能根据我写的内容弄清楚，但我知道这是一个更棘手的问题。我用如何解决.element 更新了我的答案。

哈哈是这么想的。我尝试了 .prev、.find 和 .siblings 的不同组合，但现在我明白了：D 谢谢！