如何使用同一类的多个ul中的每个li

Question

我有多个不同数据的ul attr(data-status)如果data-status等于data-step那么它将添加类名"half"1。Li将拥有类名"active";剩下的会有类名" complete "但是如果data-step等于data-status，它会添加类名" finish "剩下的部分是类名"complete"。

 <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

我不太明白你想问的是什么。

我假设您正在寻找一个函数，该函数将返回一个字符串(对于类名)，该字符串是基于变量dataStatus的值("，'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函数可以像这样:

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

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