Ruby on rails 以css/scss或JavaScript中的动态类名为目标

在我的rails应用程序中，我有两个模型：用户和目标。一个用户可以有许多目标，而一个目标属于一个用户。我有一个页面，在“用户显示”页面中列出了所有用户目标。这是使用.each循环完成的，在这个循环中，我创建了一个动态类名，将目标id放入类名中

我希望能够以css/scss文件夹中的这些单独类为目标，这样我就可以，例如，当我将鼠标悬停在第一个目标上时，只突出显示第一个目标

app/views/users/show.html.erb

<div class="user-goals-mouse-events">
<% @user.goals.each do |goal| %>
    <%= link_to goal_path(goal), class: "user-goals-hover-#{goal.id}" do %>
            <div class="row">
                <div class="col-md-4">
                    <h2 class="color-light-blue"><%= goal.name %></h2>
                </div>
                <div class="col-md-8 user-goals-description">
                    <h4><%= goal.description %></h4>
                </div>
            </div>
            <h6 class="hide-username-<%= goal.id %>"><%= @user.username %></h6>
    <% end %>
<% end %>

---

如果此问题的更好解决方案是以其他方式（例如使用javascript）完成的，请告知我，因为我希望以最有效的方式完成此任务。

尝试使用以选择器开头的属性值：

a[class^=user-goals-hover] {
  border-bottom-style: solid;
  border-bottom-color: black;
  border-bottom-width: 1px;
  //background-color: black;

  &:hover {
    background-color: #26AEFF;
    color: gold;
  }
}

---

@答案是好的，但我建议你们在课堂上更明确一些。当您需要一个用于样式和目标的类时，这是一种代码味道

是的，CSS中也有类似代码气味的东西！：）

我会有一个固定的样式类和一个动态类，甚至是一个完全不同的目标属性：

<%= link_to goal_path(goal), class: "user-goals", data: {goal_id: goal.id} do %>

---

是否只希望在悬停时突出显示第一个目标？我希望它突出显示我当前悬停的目标，因此，如果我在I.d=1的目标上悬停，那么我希望将悬停规则应用于类“user-goals-hover-1”。如果我将鼠标向下移动到下一个目标，ID为2，则应突出显示“user-goals-hover-2”类，“user-goals-hover-1”将不再突出显示。您的应用程序中是否有任何SCS工作？是的，上述SCS是唯一工作不正常的部分。实际上，当我将鼠标悬停在user goals mouse events元素上时，文本会变成金色（但背景不会变成蓝色，并且没有边框）。感谢您的帮助，我非常感谢。但我不确定这怎么不正确？在控制台中，它正确地通过，所有链接都工作并直接指向正确的页面。它是在html中呈现为，然后下一个是与2等。有没有更好的方法，我可以写这个？它的工作！我唯一改变的是在.each循环和link_to之间添加一个新的div，类名为“user goals hover-”，而不是像以前一样在link_to中添加（如果在其中，则无法工作）。因此，在scss文件中，我以“div[class^=user goals hover]”作为它的目标，效果非常好。再次感谢你的帮助！

<%= link_to goal_path(goal), class: "user-goals", data: {goal_id: goal.id} do %>

<a href="/goals/42" class="user-goals" data-goal-id="42">

.user-goals {
  //...

  &:hover {
    //...
  }
}