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")
});

Answer 2

您需要找到点击按钮所属的标记名“li”的壁橱父母。

然后选择父级后，使用“contact-form”类获取其中的元素。

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

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

Answer 3

那是因为你有多个.contact-form类的元素。我更喜欢在表单和按钮容器下绑定click事件，因此在重新排列元素时不会出现问题。例如：

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

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

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

3 个答案: