javascript - 在特定元素上添加类而不影响其他元素

Question

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

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

如果我触发“发送简历”按钮。联系表格将从左侧滑入。问题是它还会影响其他元素。

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

<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() 选择器来定位具有类 contact-form 的元素:

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