如何使多个 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'

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