在特定元素上添加 class 而不影响其他元素

Question

我想弄清楚如何在不影响其他元素的情况下在特定元素上添加 class。这是我一直在处理的页面

http://www.digitalspin.ph/test/federalland/careers/

如果我触发"Send Resume"按钮。联系表格将从左侧滑入。问题是它还会影响其他元素。

这是我一直在处理的代码。

<li id="post-<?php the_ID(); ?>" <?php post_class('six columns job-post'); ?> >
    <div class="content">
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>

        <form>
            <input type="button" class="contact-btn" value="Send your resume">
        </form>

        <div class="contact-form hide">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo neque augue, in pellentesque ipsum accumsan eget. Integer efficitur turpis vitae convallis elementum.
            </p>
            <?php echo do_shortcode('[contact-form-7 id="188" title="Careers Contact Form"]'); ?>
        </div>
    </div>
</li>


$(document).ready(function(){
    $("input.contact-btn").click(function(){
        $(".contact-form").addClass("animated slideInLeft").removeClass("hide")
    });
});

Answer 1

您可以使用 .closest() 选择器从点击元素上下文 this 的点击处理程序中遍历到最近的 li 元素。然后使用 .find() 选择器将元素定位为 class contact-form:

$("input.contact-btn").click(function(){
    $(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
});

Answer 2

您需要找到点击的按钮所属的标记名为 'li' 的壁橱父项。

然后，一旦选择了父级，就使用 'contact-form' class.

获取其中的元素

然后只需添加所需的 class 并删除 'hide' class。

$("input.contact-btn").click(function(){
        $(this).closest('li').find(".contact-form").addClass("animated slideInLeft").removeClass("hide")
    });

Answer 3

那是因为您有不止一个具有 .contact-form class 的元素。我更喜欢将点击事件绑定在表单和按钮容器下，这样当您重新排列元素时就不会出现问题。示例：

jQuery('.category-job-posts').each(function() {
  var $this = this;

  jQuery('.contact-btn', $this).click(function(){
    jQuery('.contact-form', $this).addClass('animated slideInLeft').removeClass('hide');
  });
});

在特定元素上添加 class 而不影响其他元素

Add class on specific element without affecting other elements

javascript

jquery

html

css

jquery-animate