当具有相同类的多个元素时,如何访问clicked事件的父元素?我正在尝试修改最接近的兄弟姐妹的内容。
该示例包含其应做的jQuery版本。
我将'document'用作事件列表器,因为'.interactive-btn'是动态添加的元素。
https://jsfiddle.net/gb8tr0nu/2/
HTML:
<table class="my-table">
<thead>
<tr>
<th>Account</th>
<th>Note</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="account">account one</td>
<td class="note">1234567890</td>
<td class="time">7/10/2018
<button class="interactive-btn">Button</button>
</td>
</tr>
<tr>
<td class="account">account two</td>
<td class="note">abcdefghijklmn</td>
<td class="time">7/10/2018
<button class="interactive-btn">Button</button>
</td>
</tr>
</tbody>
</table>
JS:
/* Vanilla */
document.addEventListener('click', (event) => {
if(event.target.className === 'interactive-btn') {
// get the closest .note content and chagne it.
}
});
/* Jquery */
$(document).on('click', '.interactive-btn', function(event) {
$(this).parent().siblings('.note').text('new text');
});
答案 0 :(得分:0)
如果可以使用实验功能,可以使用Element.closest
查找祖先tr
,然后将document.querySelector
与CSS选择器一起使用,找到{{1} }元素和td
。
我还使用class="note"
提出了一个更丑陋(但仍在工作)的解决方案-如果您重新构建HTML,这会被破坏!
Node.parentElement
document.addEventListener('click', (event) => {
/*if (event.target.className === 'interactive-btn') {
//looks nice, but experimental - probably shouldn't be used in production code
var noteEl = event.target.closest('tr').querySelector('td[class=note]');
noteEl.innerHTML = 'Changed!'
}
});*/
if (event.target.className === 'interactive-btn') {
//a little uglier but works if your HTML structure doesnt change
var noteEl = event.target.parentElement.parentElement.querySelector('td[class=note]');
noteEl.innerHTML = 'Changed!'
}
});