點擊每個指定類項目的功能

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

這取代了整條生產線項目，我不知道，如果你想在changebox留與否和所用的略更簡潔queryselector代替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>

Answer 2

這是我決定實施新的一天的運作方式。 el不是索引，而是它自身的元素。所以我用它來找到parentNode這是包含它的li標籤。然後從那裏搜索第一次出現的您爲這些值指定的類。

function day(el){ 
 

 
    var parent = el.parentNode; 
 
    var listitem = parent.getElementsByClassName('listitem')[0]; 
 
    var changebox = parent.getElementsByClassName('changebox')[0]; 
 

 
    listitem.innerHTML = 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>

Answer 3

它不被認爲是一個很好的做法，以混合您的JavaScript和標記。你可以考慮將它們分開。 這裏是工作代碼爲你的榜樣

$(document).ready(function() { 
 

 
    $(".listcontainer button").bind('click', day); 
 
}); 
 

 
function day(event) { 
 
    var targetElement = event.target; 
 
    var $targetObject = $(targetElement); 
 
    var siblings = $targetObject.siblings(); 
 
    var listitem = siblings.filter('.listitem'); 
 
    var changebox = siblings.filter('.changebox'); 
 
    $(listitem).html($(changebox).val()) 
 
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="listcontainer"> 
 
    <li> 
 
    <span class="listitem">Item 1</span> 
 
    <input type="text" class="changebox" /> 
 
    <button class="button">Edit</button> 
 
    </li> 
 

 
    <li> 
 
    <span class="listitem">Item 1</span> 
 
    <input type="text" class="changebox" /> 
 
    <button class="button">Edit</button> 
 
    </li> 
 
</ul>