如何使多個 ul 的每個 li 具有相同的 class

Question

我有多個具有不同數據 attr(data-status) 的 ul，如果 data-status 等於 data-step，那么它將添加 class 名稱“half”-1。 li 將具有 class 名稱“active”，rest 將具有 class 名稱“complete”，但如果 data-step 等於 data-status，它將添加 class 名稱“finish”，li 的 rest 將具有 8219511 8219511 “完全的”。

 <ul class="progressbar" data-status="3">
      <li data-step="1" /*need to add class "complete"*/>aa</li>
      <li data-step="2" /*need to add class "active"*/>bb</li>
      <li data-step="3" /*need to add class "half"*/>cc</li>
      <li data-step="4" /*there will be no class"*/>dd</li>
      <li data-step="5" /*there will be no class"*/>ee</li>
 </ul>

 <ul class="progressbar" data-status="4">
      <li data-step="1" /*need to add class "complete"*/>aa</li>
      <li data-step="2" /*need to add class "complete"*/>bb</li>
      <li data-step="3" /*need to add class "active"*/>cc</li>
      <li data-step="4" /*need to add class "half"*/>dd</li>
      <li data-step="5" /*there will be no class"*/>ee</li>
 </ul>

<ul class="progressbar" data-status="5">
      <li data-step="1" /*need to add class "complete"*/>aa</li>
      <li data-step="2" /*need to add class "complete"*/>bb</li>
      <li data-step="3" /*need to add class "complete"*/>cc</li>
      <li data-step="4" /*need to add class "complete"*/>dd</li>
      <li data-step="5" /*need to add class "finish"*/>ee</li>
 </ul>

Answer 1

我不完全確定我明白你想問什么。

我假設您正在尋找一個 function，它將根據變量 dataStatus 的值返回一個字符串（對於 class 名稱），它是（''、'complete'、'half'、'finish'）之一。

如果是這種情況，那么您的 ul 可能看起來像這樣：

            <ul className="progressbar" data-status={dataStatus}>
                <li data-step="1" class={getClassName(1, dataStatus)} >aa</li>
                <li data-step="2" class={getClassName(2, dataStatus)} >bb</li>
                <li data-step="3" class={getClassName(3, dataStatus)} >cc</li>
                <li data-step="4" class={getClassName(4, dataStatus)} >dd</li>
                <li data-step="5" class={getClassName(5, dataStatus)} >ee</li>
            </ul>

而 getClassName function 可能是這樣的：

    const getClassName = (dataStep, dataStatus) => dataStatus > dataStep ? '' : dataStatus === dataStep ? dataStatus === '5' ? 'finish' : 'half' : 'complete'

但我真的不知道你在問什么。