使用jQuery

Question

我有一点问题：

(function ($) {
    $(document).ready(function() {
        $(".suaugusi").click(function () {
            $(".activ-suaug, .activ-title-suaugusi").slideToggle("slow");
        });
    });
})(jQuery);

如何使用上面的代码，以确保它只适用于一个类 .suaugusi的DIV？我有12个div具有相同的类，但我需要，它只会在点击后激活。怎么做？

修改

<div class="col-md-4 col-xs-12 uzsiemimas">
  <div class="portfolio-item suaugusi">
    <div class="item-inner">
      <img class="img-responsive" src="<?php the_sub_field('nuotrauka'); ?>" alt="">
      <h4 class="activ-title-suaugusi"><?php the_sub_field('pavadinimas'); ?></h4>
      <div class="overlay"></div>
      <div class="activ-menu activ-suaug">
        <?php if( have_rows( 'uzsiemimo_veiklos') ): while ( have_rows( 'uzsiemimo_veiklos') ) : the_row(); ?>
        <a href="<?php the_sub_field('nuoroda'); ?>">
          <div class="activ-element">
            <?php the_sub_field( 'pavadinimas');?>
          </div>
        </a>
        <?php endwhile; else : endif; ?>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以使用事件处理程序中的this关键字来引用引发事件的元素，然后find()来检索要定位的特定元素。试试这个：

(function ($) {
    $(document).ready(function() {
        $(".suaugusi").click(function () {
            $(this).find('.activ-suaug, .activ-title-suaugusi').slideToggle("slow");
        });
    });
})(jQuery);

Answer 2

由于activ-suaug和activ-title-suaugusi是suaugusi的子元素，您应该使用.find()遍历它们，然后执行所需的操作。

使用

$(".suaugusi").click(function () {
    $(this).find(".activ-suaug, .activ-title-suaugusi").slideToggle("slow");
});