JavaScript හි අංග විලාසිතා කිරීම
අපට ඡේද කිහිපයක් ඇතැයි සිතමු:
<p>text1</p>
<p>text2</p>
<p>text3</p>
අපි මෙම ඡේද චක්රයකින් පුනරාවර්තනය කර, සෑම ඡේදයකම අවසානයට
සබැඳියක් එකතු කරමු. මෙම සබැඳිය ක්ලික් කිරීමෙන්
ඡේදයේ ලෙඛනයට යම් ආකාරයක විලාසිතාවක් එකතු වේ.
උදාහරණයක් ලෙස, ඡේදයේ ලෙඛනය හරස් ඉරි ඇඳීම (මෙය ක්රියාත්මක කරන්නේ
CSS ගුණාංගය text-decoration මගිනි).
අපි එවැනි කාර්යයක නියුක්තික කරුණු දෙකක් සාකච්ඡා කරමු.
පළමුව, පෙර පාඩම්වල සාකච්ඡා කළ පරිදි, JavaScript හරහා සෘජුවම ඡේදවල විලාසිතාව වෙනස් නොකිරීම වඩා හොඳය - යම් CSS පංති යොදා ගැනීම වඩාත් පහසු වනු ඇත.
දෙවනුව, එවැනි කාර්යයක් ක්රියාත්මක කිරීමේදී ඔබට යම් පුදුමයක් ඇති වනු ඇත. එහි ස්වභාවය අවබෝධ කර ගැනීමට, සබැඳි එකතු කිරීමෙන් පසු ඡේදවල HTML කේතය බලමු:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
දැන් හිතන්න, සබැඳිය ක්ලික් කිරීමෙන් ඡේදයේ ලෙඛනය හරස් ඉරි ඇදෙනු ඇත. කෙසේ වෙතත්, සබැඳිය මෙම නඩුවේදී ඡේදයේ කොටසක් වන අතර එයද හරස් ඉරි ඇදෙනු ඇත! බොහෝ විට එවැනි ප්රතිඵලයක් අපට අවශ්ය නොවේ. අපට අවශ්ය වන්නේ ලෙඛනය හරස් ඉරි ඇදීමයි, නමුත් සබැඳිය - නොවේ.
ගැටලුව විසඳීම සඳහා, ඡේදයේ ලෙඛනය
span ටැගයකින් ආවරණය කිරීම පමණක් අවශ්ය වේ, මේ ආකාරයට:
<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
පහත HTML කේතය දෙනු ලැබේ:
<p>text1</p>
<p>text2</p>
<p>text3</p>
සෑම ඡේදයකම අවසානයට සබැඳියක් එක් කරන්න. මෙම සබැඳිය ක්ලික් කිරීමෙන් ඡේදයේ ලෙඛනය හරස් ඉරි ඇදෙනු ඇත (නමුත් සබැඳිය - නොවේ).
පෙර කාර්යය වෙනස් කරන්න, එවිට සබැඳිය ක්ලික් කිරීමෙන් පසු එම සබැඳිය ඡේදයෙන් ඉවත් වේ (ඡේදයේ ලෙඛනය හරස් ඉරි ඇදෙන අතර).
යම් HTML වගුවක් දෙනු ලැබේ. මෙම වගුවට සබැඳියක් සහිත තවත් තීරුවක් එක් කරන්න. මෙම සබැඳිය ක්ලික් කිරීමෙන්, එම සබැඳිය සහිත පේළිය හරිත පසුබිමක් ලබා ගත යුතුය.
පෙර කාර්යය වෙනස් කරන්න, එවිට සබැඳිය මත පළමු ක්ලික් කිරීම පේළිය හරිත පසුබිමින් පින්තාරු කරන අතර, දෙවන ක්ලික් කිරීම මෙම ක්රියාව අවලංගු කරයි.
