მომხმარებლის ატრიბუტები JavaScript-ში

HTML-ში ნებადართულია თეგებს დაემატოს საკუთარი, მომხმარებლის ატრიბუტები. ასეთი ატრიბუტები უნდა იწყებოდეს data--ით, ხოლო შემდეგ შეიძლება იყოს ნებისმიერი ატრიბუტის სახელი, რომელიც თქვენთვის მოსახერხებელია.

მომხმარებლის ატრიბუტები შეიძლება გამოყენებულ იქნას უთვალავი სხვადასხვა გზით. ამ გზებიდან ბევრს შევისწავლით შემდგომ სახელმძღვანელოში, ხოლო კიდევ უფრო მეტს თავად შეძლებთ გამოგონებას მომავალში.

ასეთ ატრიბუტებზე მითითება არ არის სტანდარტული. შეუძლებელია უბრალოდ ელემენტის იმავე სახელის თვისებაზე მითითება, როგორც ადრე ვაკეთებდით, არამედ უნდა გამოვიყენოთ სპეციალური თვისება dataset, რის შემდეგაც წერტილით იწერება ატრიბუტის სახელი data--ის გარეშე. მაგალითად, თუ ჩვენი ატრიბუტის სახელია data-test, მაშინ მასზე მითითებისთვის ჩვენ დავწერთ elem.dataset.test, სადაც elem - ცვლადი ჩვენი ელემენტით.

მოდით შევხედოთ მაგალითს. მოდით, ჩვენ გვაქვს მოცემული ასეთი ელემენტი:

<div id="elem" data-num="1000"></div>

ეკრანზე გამოვიტანოთ მისი ატრიბუტის data-num მნიშვნელობა:

let elem = document.querySelector('#elem');
console.log(elem.dataset.num); // გამოიტანს 1000-ს

ახლა კი მივანიჭოთ ამ ატრიბუტს სხვა მნიშვნელობა:

let elem = document.querySelector('#elem');
elem.dataset.num = 123;

მოცემულია შემდეგი კოდი:

<div id="elem" data-text="str">text</div>

გახადეთ ისე, რომ დივზე დაწკაპუნებით მისი ტექსტის ბოლოს დაემატოს მისი ატრიბუტის data-text შიგთავსი.

მოცემულია დივები, რომლებიც შეიცავენ თავიანთ სერიულ ნომერს data-num ატრიბუტში:

<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>

გახადეთ ისე, რომ ნებისმიერ დივზე დაწკაპუნებისას მის ბოლოს ჩაიწეროს მისი სერიული ნომერი.

მოცემულია ღილაკი. გახადეთ ისე, რომ ეს ღილაკი დათვალოს მასზე დაწკაპუნებების რაოდენობა, ჩაწეროს ის რაიმე მომხმარებლის ატრიბუტში. მოდით, სხვა ღილაკზე დაწკაპუნებისას ეკრანზე გამოჩნდეს, რამდენი დაწკაპუნება იყო პირველ ღილაკზე.

მოცემულია ინფუთი:

<input id="elem" data-length="5">

ამ ინფუთში data-length ატრიბუტში მოცემულია სიმბოლოების რაოდენობა, რომელიც საჭიროა შევიყვანოთ ინფუთში. გახადეთ ისე, რომ ფოკუსის დაკარგვისას, თუ შეყვანილი სიმბოლოების რაოდენობა არ ემთხვევა მითითებულს, გამოჩნდეს მესიჯი ამის შესახებ.

მოცემულია ინფუთი:

<input id="elem" data-min="5" data-max="10">

ამ ინფუთში ატრიბუტები data-min და data-max შეიცავს დიაპაზონს. გახადეთ ისე, რომ ფოკუსის დაკარგვისას, თუ შეყვანილი სიმბოლოების რაოდენობა არ ხვდება ამ დიაპაზონში, გამოჩნდეს მესიჯი ამის შესახებ.