如何在jQuery中按行应用样式

Question

​

​

我已经在Div上创建了一个循环，我给了他们不同的id，例如(div [id]=" 'wave' + i " )，(div [id]=" 'wave1' + i " )等等，给定的要求是当你点击位于每一行前面的按钮时，样式就应用到了特定的行，所以我已经应用了下面的逻辑，我觉得下面的逻辑是静态的和长的，有人能帮助我哪一个逻辑是动态的和更少的。

 AllokVertical(name) {
    // console.log("name is ",name)
    this.buttonpressedData.forEach((ele) => {
      if (name === "Test1") {
        var i = 0
        if (ele.id === `wave${i}` || ele.id === `wave${i + 1}${i}` || ele.id === `wave${i + 2}${i}` || ele.id === `wave${i + 3}${i}` || ele.id === `wave${i + 4}${i}` || ele.id === `wave${i + 5}${i}`) {
          $('#' + ele.id).removeClass('yellow')
        }

      } else if (name === "Test2") {
        var i = 1
        if (ele.id === `wave${i}` || ele.id === `wave${i}${i}` || ele.id === `wave${i + 1}${i}` || ele.id === `wave${i + 2}${i}` || ele.id === `wave${i + 3}${i}` || ele.id === `wave${i + 4}${i}`) {
          $('#' + ele.id).removeClass('yellow')
        }

      } else if (name === "Test3") {
        var i = 2
        if (ele.id === `wave${i}` || ele.id === `wave${i - 1}${i}` || ele.id === `wave${i}${i}` || ele.id === `wave${i + 1}${i}` || ele.id === `wave${i + 2}${i}` || ele.id === `wave${i + 3}${i}`) {
          $('#' + ele.id).removeClass('yellow')
        }
      }else if (name === "Test4") {
        var i = 3
        if (ele.id === `wave${i}` || ele.id === `wave${i - 2}${i}` || ele.id === `wave${i-1}${i}` || ele.id === `wave${i}${i}` || ele.id === `wave${i+1}${i}` || ele.id === `wave${i + 2}${i}`) {
          $('#' + ele.id).removeClass('yellow')
        }
      }else if (name === "Test5") {
        var i = 4
        if (ele.id === `wave${i}` || ele.id === `wave${i - 3}${i}` || ele.id === `wave${i-2}${i}` || ele.id === `wave${i-1}${i}` || ele.id === `wave${i}${i}` || ele.id === `wave${i + 1}${i}`) {
          $('#' + ele.id).removeClass('yellow')
        }
      }else {
        var i = 5
        if (ele.id === `wave${i}` || ele.id === `wave${i - 4}${i}` || ele.id === `wave${i-3}${i}` || ele.id === `wave${i-2}${i}` || ele.id === `wave${i-1}${i}` || ele.id === `wave${i}${i}`) {
          $('#' + ele.id).removeClass('yellow')
        }
      }

    })
  }

Answer 1

您可以将data-name属性添加到dive中，然后在查询中使用该属性查找被单击的行，您可以将类添加到匹配的元素中，并从其他元素中删除相同的类。

<div data-name="{{data1.comments}}" data-toggle="tooltip" data-placement="bottom" title={{data1.comments}} [id]=" 'wave' + i " (click)="openmodel('wave' + i,'Google')"  class="buttoncolor row">
     <p class="innerText">{{data1.Google}}</p>
</div>

在代码中

AllokVertical(name) {
    $('.row').removeClass('yellow');
    $('*[data-name="'+name+'"]').addClass('yellow');
}

这就是你的想法，你可以通过这个来达到你想要的效果。