javascript - jquery如何获取特定元素

Question

我有 HTML 结构L

<div class="services-article-elements-single">
    <div class="services-article-description">
        <button class="services-article-read-more-btn">read more</button>
    </div>
    <div class="services-article-after-roll"></div>
</div>

我希望点击按钮后我的 <div class="services-article-after-roll"></div> 发生一些事情

到目前为止，我已经:

jQuery('.services-article-read-more-btn').click(() =>{
   // ????????
})

我认为合适的方法是find()但我不确定

Answer 1

只需选择您的元素即可。在这种情况下，您可以select you element by class 。在我的简单示例中，按钮显示或隐藏 div。

$('.services-article-read-more-btn').click(function() {
   $(".services-article-after-roll").toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="services-article-elements-single">
    <div class="services-article-description">
        <button class="services-article-read-more-btn">My button</button>
    </div>
    <div class="services-article-after-roll">MY DIV</div>
</div>

编辑:如果您的结构包含多个 services-article-elements-single 类的 div，您可以使用 .closest() 选择一个包装器 div然后使用 .find() 找到该容器内部的元素功能。

$('.services-article-read-more-btn').click(function() {
   var elementWrapper = $(this).closest(".services-article-elements-single");
   elementWrapper.find(".services-article-after-roll").toggle();
})

.services-article-elements-single {
  padding: 10px;
  margin: 10px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="services-article-elements-single">
    <div class="services-article-description">
        <button class="services-article-read-more-btn">My button</button>
    </div>
    <div class="services-article-after-roll">MY DIV</div>
</div>

<div class="services-article-elements-single">
    <div class="services-article-description">
        <button class="services-article-read-more-btn">My button</button>
    </div>
    <div class="services-article-after-roll">MY DIV</div>
</div>

<div class="services-article-elements-single">
    <div class="services-article-description">
        <button class="services-article-read-more-btn">My button</button>
    </div>
    <div class="services-article-after-roll">MY DIV</div>
</div>