add/remove class 如果 id/class 匹配

Question

我正在尝试 link 使用旋转木马类型 div 布局的点导航，并且需要正确的 div 在单击每个特定点时显示，以及 visa反之亦然，因此点在显示特定 div 时处于活动状态。第二部分很重要，因为我有不止一种导航形式。

圆点html

<div class="dotstyle dotstyle-scaleup">
        <ul>
            <li id="avn" class="current"><a href="#"></a></li>
            <li id="pp"><a href="#"></a></li>
            <li id="w65"><a href="#"></a></li>
            <li id="trs"><a href="#"></a></li>
            <li id="cc"><a href="#"></a></li>
        </ul>
    </div>

（wordpress 菜单）项目html

<ul id="menu-project" class="show">
  <li class="avn selected"></li>
  <li class="pp"></li>
  <li class="w65"></li>
  <li class="trs"></li>
  <li class="cc"></li>
</ul>

jQuery

$(document).ready(function(){
    var dots = $('.dotstyle ul li');
    var project = $('ul#menu-project li.menu-item');
    var dotsId = dots.attr('id');
    var projectClass = project.attr('class');

    $(dots).click(function(){
        $(dots).removeClass('current');
        $(this).addClass('current');
    });

    $(dots).each(function(){
        if (dots.hasClass('current')) {
            if (dotsId = projectClass) {
                project.addClass('selected');
            } else {
                project.removeClass('selected');
            }
        } else {

        }
    });
});

这是我能得到的最接近的，但它目前只是将 "selected" 添加到每个列表项。

Answer 1

$(document).ready(function() {
    var dots = $('.dotstyle ul li');
    var project = $('ul#menu-project li.menu-item');
    var dotsId = dots.attr('id');
    var projectClass = project.attr('class');

    $(dots).click(function() {
        $(dots).removeClass('current');
        $(this).addClass('current');
    });

    $(dots).each(function() {
        if (dots.hasClass('current')) {
            if (dotsId = projectClass) {
                project.addClass('selected');
            } else {
                project.removeClass('selected');
            }
        }
    });
});

而不是 if (dotsId = projectClass) 在两者之间放置一个双等号 (==)。单个等号将 dotsId 的值设置为 projectClass EVERY TIME，这是你不想要的！

Answer 2

这应该有效：

$(document).ready(function() {

  var $dots = $('.dotstyle ul li');
  var $project = $('#menu-project');

  $dots.on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var dotsId = $this.attr('id');

    $('.dotstyle ul').find('li.current').removeClass('current');
    $this.addClass('current');
    $project.find('li.selected').removeClass('selected');
    $project.find('li.' + dotsId).addClass('selected');

  });


  $(document).keydown(function(e) {
    switch (e.which) {
      case 37: // left
        $('.dotstyle ul').find('li.current').prev().addClass('current');
        $('.dotstyle ul').find('li.current').next().removeClass('current');
        $project.find('li.selected').prev().addClass('selected');
        $project.find('li.selected').next().removeClass('selected');
        break;
      case 39: // right
        $('.dotstyle ul').find('li.current').next().addClass('current');
        $('.dotstyle ul').find('li.current').prev().removeClass('current');
        $project.find('li.selected').next().addClass('selected');
        $project.find('li.selected').prev().removeClass('selected');
        break;

      default:
        return;
    }
    e.preventDefault();
  });


});

.dotstyle ul li a {
  color: red;
}
.dotstyle ul li.current a {
  color: blue;
}
#menu-project li {
  color: green;
}
#menu-project li.selected {
  color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="dotstyle dotstyle-scaleup">
  <ul>
    <li id="avn" class="current">
      <a href="#">test</a>
    </li>
    <li id="pp">
      <a href="#">test</a>
    </li>
    <li id="w65">
      <a href="#">test</a>
    </li>
    <li id="trs">
      <a href="#">test</a>
    </li>
    <li id="cc">
      <a href="#">test</a>
    </li>
  </ul>
</div>


<ul id="menu-project" class="show">
  <li class="avn selected">test</li>
  <li class="pp">test</li>
  <li class="w65">test</li>
  <li class="trs">test</li>
  <li class="cc">test</li>
</ul>

一点澄清：

您只需要将点击绑定到您想要获取信息的元素上。另外，我喜欢用 $ 标记我的 DOM 对象，而没有标记属性（以便于代码管理）。您创建了一个 DOM 对象

var dots = $('.dotstyle ul li');

然后为该对象创建另一个对象

$(dots)...

对于 jQuery()，$() 是 shorthand，即 jQuery 对象。所以不需要再包裹它。

绑定点击事件后，从被点击的元素（id）中获取信息，进行class检查，然后需要在第二个菜单中查找带有[=55=的元素] 匹配被点击项目的 id

$project.find('li.' + dotsId)

由于您是通过一次单击查看所有 $project 个元素，因此不需要 each()。只需检查里面的列表项是否有 class，如果有就添加一个新的。

希望对您有所帮助。

编辑

我已经编辑了代码，现在应该按照你在评论中说的去做了。

编辑 2

再次编辑代码，并包含键绑定...

add/remove class 如果 id/class 匹配

add/remove class if id/class match

html

navigation

wordpress

jquery