classList.toggle مع force: اجعل الصنف يطابق الحالة الحالية

الخلاصة السريعة

حدّد الحالة بدل عدّ مرات التنفيذ

بدون force يعكس toggle وجود الصنف؛ ومعه تطبّق الحالة المطلوبة بدل عكس الحالة السابقة. [1]

قد تستدعي دالة العرض مرتين للحالة نفسها. إذا كانت البطاقة مختارة، ينبغي أن يبقى الصنف موجودًا. حذف الوسيط الثاني يجعل الاستدعاء التالي يعكس النتيجة؛ استخدمه فقط حين تقصد التبديل. [1]

جهّز بطاقة لها صنف أساسي

تمثل classList أصناف العنصر بقائمة حية؛ تعديلها يغيّر سمة class نفسها. [2]

احفظ العينة في صفحة HTML، ثم ضع شيفرة JavaScript التالية بعد البطاقة داخل script. الصنف card يضبط شكلها الأساسي، وis-selected يضيف لون الإطار. تبقى الأصناف الأخرى عند تعديل صنف بعينه عبر classList. [2]

افحص سمة class في أدوات المطور أثناء التجربة. إن غاب التغير المرئي، راجع وجود قاعدة CSS المقابلة؛ وجود اسم في قائمة الأصناف ليس وحده وصفًا لكل تنسيق الصفحة. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

<style>
  .card { padding: 16px; border: 3px solid #aaa; }
  .is-selected { border-color: #14786e; }
</style>
<div id="card" class="card">بطاقة القراءة</div>

اقرأ النتيجة بعد الاستدعاء

تعني القيمة المعادة وجود الصنف بعد الاستدعاء، ولا تثبت حدوث تغيير في ذلك الاستدعاء. [3]

تطبع العينة true ثم true ثم false ثم false. الاستدعاء الثاني يعيد true مع أن الصنف موجود أصلًا؛ والرابع يعيد false مع أنه غائب أصلًا. لذلك لا تسمّ القيمة المعادة «حدث تغيير». [3]

بعد تنفيذ الأسطر الأربعة، تنتهي البطاقة دون is-selected، ويبقى card. جرّب أول استدعاء وحده لرؤية الإطار الملون، ثم كرره قبل إزالة الصنف. [2] [3]

مرّر الشيفرة أفقيًا عند الحاجة.

const card = document.getElementById("card");
function syncSelected(selected) {
  return card.classList.toggle("is-selected", selected);
}
console.log(syncSelected(true));
console.log(syncSelected(true));
console.log(syncSelected(false));
console.log(syncSelected(false));

تحقق من اسم الصنف

مرّر اسم صنف واحدًا غير فارغ؛ الاسم الفارغ أو المحتوي على مسافة ASCII يسبب استثناءً. [3]

لا تجمع card وis-selected في وسيط واحد تفصل بينهما مسافة. يرفض toggle السلسلة الفارغة بخطأ SyntaxError، ويرفض مسافات ASCII بخطأ InvalidCharacterError، حتى مع force. اختبر بالاسم is-selected كما في العينة. [3]