2016-12-28 154 views
0

我建立一個「編輯個人資料」頁。隱藏/顯示子元素的onclick

這是我想做的事:

  1. 在每一部分,用人單位將顯示和編輯表單將被隱藏。
  2. 當我點擊「編輯僱主」按鈕,編輯表單將顯示與用人單位將被隱藏。

這裏是我做過什麼使用jQuery。當我點擊「編輯僱主」按鈕時,它不起作用。我不知道爲什麼這不起作用。

<!DOCTYPE html> 
<html> 
    <head> 
     <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    </head> 

    <body> 
     <div class="edit"> 
      <form class="editForm"> 
       employer: <input type="text" value="Citigroup" /> 
      </form> 
      <div class="contents">Employer: Citigroup</div> 
      <button class="editButton">Edit Employer</button> 
     </div> 

     <script> 
      $('div.edit').each(function(i) { 
       $(this).children('.editForm').hide(); 
      }) 
      $('div.edit').each(function() { 
       $(this).children('.editButton').click(function() { 
        $(this).children('.editForm').show(); 
        $(this).children('.contents').hide(); 
       }); 
      }) 
     </script> 
    </body> 
</html> 
+0

你的'this'內的點擊處理程序不同於每個。在點擊中,它指的是.editButton元素。 – Axnyff

+0

'.editButton'沒有孩子。事件處理程序中的$(this)'指的是被點擊的按鈕。使用'$(this).siblings('。editForm')。show()。siblings('。contents).hide()' – Tushar

+0

歡迎。避免使用'each',jQuery爲你做。 '$('div.edit .editForm')。hide();'或者更好,使用CSS來隱藏元素。並綁定事件'$('div.edit .editButton')。click(function(){...});' – Tushar

回答

2

click函數內的$(this)包含$(this).children('.editButton')的本地實例。出於這個原因,你的代碼沒有找到任何.editForm元素。

對於這個工作,你可以做這樣的事情:

<script> 
    $('div.edit').each(function(i) { 
     $(this).children('.editForm').hide(); 
    }) 
    $('div.edit').each(function() { 
     var $this = $(this); 
     $(this).children('.editButton').click(function() { 
      $this.children('.editForm').show(); 
      $this.children('.contents').hide(); 
     }); 
    }) 
</script> 

如果我可以我會改善一些更多的變化代碼:

<script> 
    $('.edit .editForm').hide(); // this will hide all instances of .editForm 
    $('.edit .editButton').click(function() { //assign 1 handler for all cases 
     $(this).siblings('.editForm').show(); // show the sibling edit form 
     $(this).siblings('.contents').hide(); // hide the sibling contents element 
    }); 
</script> 

參考: 兄弟選擇:https://api.jquery.com/siblings/#siblings-selector

+0

非常乾淨的解決方案。我喜歡。謝謝。 – Zhuo

+0

@卓沒有問題 –

+0

很高興我幫了你,如果你喜歡它接受它作爲答案:P –

0

問題是單擊處理指的是按鈕,而不是div.editthis。下面是解決這個問題的一種方法:

$('div.edit').each(function(i) { 
 
    $(this).children('.editForm').hide(); 
 
}); 
 
$('div.edit').each(function() { 
 
    var $self = $(this); 
 
    $(this).children('.editButton').click(function() { 
 
    $self.children('.editForm').show(); 
 
    $self.children('.contents').hide(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="edit"> 
 
    <form class="editForm"> 
 
    employer: 
 
    <input type="text" value="Citigroup" /> 
 
    </form> 
 
    <div class="contents">Employer: Citigroup</div> 
 
    <button class="editButton">Edit Employer</button> 
 
</div>

+0

並且此代碼可以[改進](http://stackoverflow.com/questions/41363783 /隱藏秀 - 子元素上單擊功能於jQuery的#comment69929040_41363783)。 「每個」都可以避免。 – Tushar

+0

@Tushar如果我在頁面上有很多部分(不同的僱主,學校),你如何避免每個部分? – Zhuo

+0

@卓已經在我的其他評論中解釋過。 – Tushar

0

你並不需要使用.each()可言。只需在.editButton的類別上執行.click()事件並使用this查找其父項。如果你想做一個切換,你將不得不使用一個新的類或類似的東西來創建一個條件語句。

//This will hide *ANY* .editForm elements 
$('.editForm').hide(); 

//This will fire off of *ANY* editButton clicks. 
$('.editButton').click(function() { 
    var form = $(this).closest('.edit');    //Get the wrapper 
    if(form.hasClass('open')) {      //Check to see if it is open or not 
     form.removeClass('open').addClass('close'); //Toggle Classes 
     form.find('.editForm').show(); 
     form.find('.contents').hide(); 
    } else { 
     form.removeClass('close').addClass('open'); 
     form.find('.editForm').hide(); 
     form.find('.contents').show(); 
    } 
}); 

我喜歡使用比(分別)parentchildrenclosestfind更多。他們可以向上或向下走1層,並搜索層次結構以查找您正在查找的任何內容,而不是在單個層上向下或向下搜索parentchildren

如果您在DOM加載後插入你的.edit形式,你將需要點擊事件綁定到文檔

$(document).on('click', '.editButton', function() { 
    var form = $(this).closest('.edit'); 
    form.find('.editForm').hide(); 
    form.find('.contents').show(); 
});