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>

不管怎么说，没有这个选择器，但没有它，这将选择我显然不想要的所有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 s是前一个兄弟$(this)的孩子。因此，替换

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

与

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

以下是一些关于这些功能的jQuery文档： https://api.jquery.com/category/traversing/tree-traversal/

Jquery $（'class'，this）选择器不起作用

1 个答案: