在特定元素上添加類而不影響其他元素

我想弄清楚如何在特定元素上添加類而不影響其他元素。這是我一直在努力在特定元素上添加類而不影響其他元素

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

來源

2015-06-22 clestcruz

請您詳細說明「它也會影響其他元素」嗎？請原諒我的無知。 –

可以遍歷到在從點擊元素上下文this點擊處理程序使用.closest()選擇最接近li元素。然後用.find()選擇的元素與contact-form類目標：

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

來源

2015-06-22 11:05:31

你需要找到衣櫃父與標記名「禮」給誰按鈕點擊所屬。

然後，一旦父母被選中，使用'contact-form'類獲取其中的元素。

然後只需添加所需的類並刪除'隱藏'類。

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

來源

2015-06-22 11:09:45 tariq

該按鈕的父級不包含'.contact-form'元素。 –

那是因爲你有多個元素，它有.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'); 
    }); 
});

來源

2015-06-22 11:15:59

在特定元素上添加類而不影響其他元素

回答

相關問題