我建立一個「編輯個人資料」頁。隱藏/顯示子元素的onclick
這是我想做的事:
- 在每一部分,用人單位將顯示和編輯表單將被隱藏。
- 當我點擊「編輯僱主」按鈕,編輯表單將顯示與用人單位將被隱藏。
這裏是我做過什麼使用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>
你的'this'內的點擊處理程序不同於每個。在點擊中,它指的是.editButton元素。 – Axnyff
'.editButton'沒有孩子。事件處理程序中的$(this)'指的是被點擊的按鈕。使用'$(this).siblings('。editForm')。show()。siblings('。contents).hide()' – Tushar
歡迎。避免使用'each',jQuery爲你做。 '$('div.edit .editForm')。hide();'或者更好,使用CSS來隱藏元素。並綁定事件'$('div.edit .editButton')。click(function(){...});' – Tushar