javascript - 每个指定类别项目的点击功能

Question

我有一个应该与每个li相对应的函数。使用纯 JavaScript，我想知道如何将 listitem 上的 HTML 替换为用户输入的任何内容。

我只想运行单击的函数，并且仅针对适当的行(在本例中为 li)。

function day(el){
var listitem = document.getElementsByClassName('listitem');
var changebox = document.getElementsByClassName('changebox');

listitem[el].innerHTML = changebox[el].value;
}

ul li {list-style-type: none;}
.changebox {width: 40px;}

<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>

Answer 1

这会替换整个行项目，我不知道您是否希望保留更改框，并使用稍微不太详细的查询选择器而不是 getElementByClassName。

function day(el){
var parent = el.parentNode;
var changebox = parent.querySelector('.changebox')
var listitem = parent.querySelector('.listitem')

listitem.innerHTML = "Item " + changebox.value;
}

ul li {list-style-type: none;}
.changebox {width: 40px;}

<ul>
<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

<li>
<span class="listitem">Item 1</span>
<input type="text" class="changebox"/>
<button onclick="day(this)">Edit</button>
</li>

</ul>