JavaScript-da elementlarni uslublash

Faraz qilaylik, bizda bir nechta abzatslar bor:

html<p>matn1</p>
<p>matn2</p>
<p>matn3</p>

Keling, ushbu abzatslarni tsikl bilan aylantiramiz va har bir abzatsning oxiriga havola qo'shamiz, unga bosganda abzats matniga ma'lum bir uslub qo'shiladi. Masalan, abzats matni chizilgan holatga keladi (buni CSS xususiyati text-decoration amalga oshiradi).

Keling, bunday vazifaning iki nuansini muhokama qilaylik.

Birinchi navbatda, oldingi darslarda muhokama qilinganidek, abzatslarning uslubini to'g'ridan-to'g'ri JavaScript orqali o'zgartirish kerak emas - CSS klasslarini qo'llash ancha qulayroq bo'ladi.

Ikkinchidan, bunday vazifani amalga oshirishda sizni ma'lum bir sir kutmoqda. Uning mazmunini tushunish uchun havolalar qo'shilgandan keyingi abzatslarning HTML kodiga nazar solaylik:

html<p>matn1<a href="">havola</a></p>
<p>matn2<a href="">havola</a></p>
<p>matn3<a href="">havola</a></p>

Endi tasavvur qilaylik, havolani bosish orqali abzats matni chiziladi. Biroq, havola bu holda abzatsning bir qismi hisoblanadi va u ham chiziladi! Ehtimol bunday effekt bizga kerak emas. Biz matn chizilishini xohlaymiz, lekin havola chizilmasin.

Muammoni hal qilish uchun shunchaki abzats matnini span tegi ichiga o'rab qo'yish kifoya, mana shunday:

html<p><span>matn1</span><a href="">havola</a></p>
<p><span>matn2</span><a href="">havola</a></p>
<p><span>matn3</span><a href="">havola</a></p>

html<p>matn1</p>
<p>matn2</p>
<p>matn3</p>