jquery - Bootstrap - 在导航栏中更改事件类

Question

我知道这个问题被问了超过一百万次，但我无法填补这个空白。

我有一个非常基本的导航栏结构，如下所示:

<ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
            <%= link_to "Entry", entry_path, class: 'nav-link', 'data-turbolinks' => false %>
        </li>
        <li class="nav-item">
            <%= link_to "Entry 2", entry2_path, class: 'nav-link', 'data-turbolinks' => false %>
        </li>
        <li class="nav-item localization-links">
            <% unless I18n.locale == :en %>
                <div class="unactive-localization-button">
                    <%= link_to "EN", locale: :en %>
                </div>
            <% else %>
                <a class: 'nav-link'>EN</a> 
            <% end %>
        </li>
        <li class="nav-item localization-links">
            <% unless I18n.locale == :fr %>
                <%= link_to "FR", locale: :fr %>
            <% else %>
                <a class: 'nav-link'>FR</a>
            <% end %>
        </li>
    </ul>

我的实际结构更复杂，所以我减少了大部分代码，如其他链接和条件，以提高可读性。 我这样更改事件类:

$(".nav li").click(function() {
    if ($(".nav li").hasClass("active")) {
       $(this).removeClass("active");
    } else {
       $(this).addClass("active");
    }
});

它适用于除我的本地化链接之外的所有链接(“条目 1”、“条目 2”等)。我只想为这些链接提供 active 类，但不知何故，到目前为止我读到的东西对我都没有用(我用这个 thread 来检查我哪里出错了)。当我更改本地化时，我没有出现控制台错误，而且我显然在浏览器的编辑器中手动添加了“事件”类，但没有使用我的代码。 任何想法为什么？提前感谢您的宝贵时间，感谢任何评论或回答!

Answer 1

我解决了这个问题。这不是一个常见问题(至少我在谷歌搜索时没有发现)，但无论如何我都会发布我的解决方案，以防有人也遇到这样的问题。我的问题是 unless 语句不正确，这就是我如何让它工作的:

<% unless I18n.locale == :en %>
    <li class="nav-item">
        <%= link_to "EN", locale: :en %>
    </li>
<% else %>
    <li class="nav-item active">
        <a class='nav-link'>EN</a> 
    </li>
<% end %>
<% unless I18n.locale == :fr %>
    <li class="nav-item">
        <%= link_to "FR", locale: :fr %>
    </li>
 <% else %>
     <li class="nav-item active">
         <a class='nav-link'>FR</a>
     </li>
 <% end %>

所以如果用户选择语言环境，我就明确地传递 active 类。