Таҳрир дар гурӯҳи унсурҳо дар JavaScript

Бигзор акнун як абзас надорем, балки бисёр:

<p>матн1</p>
<p>матн2</p>
<p>матн3</p>

Биёед чунон кунем, ки бо клик кардан ба рӯйи ҳар як абзас дар он вуруди барои таҳрир пайдо шавад.

Дар асл чунин вазифа барои мо душворӣ надорад, зера қариб тамоми рамз аз дарси гузашта ба даст оварда шуда буд.

Барои ҳалли вазифаи мо танҳо даврзаниро ба абзасҳо оғоз мекунем ва дар давр рамзи дарси гузаштаро истифода мебарем (ин рамз ҳатто тағйир доданро низ талаб намекунад):

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = elem.textContent;
		
		elem.textContent = '';
		elem.appendChild(input);
		
		input.addEventListener('blur', function() {
			elem.textContent = this.value;
			elem.addEventListener('click', func);
		});
		
		elem.removeEventListener('click', func);
	});
}

Теги ul дода шудааст. Чунон кунед, ки бо клик кардан ба рӯйи ҳар як li дар он вуруде пайдо шавад, ки бо ёрии он метавон матни ин li-ро таҳрир кард.

Ҷадвали HTML дода шудааст. Чунон кунед, ки бо клик кардан ба рӯйи ҳар як ҳуҷра дар он вуруде барои таҳрири матни он ҳуҷра пайдо шавад.