如果 id/class 匹配，则添加/删除类

Question

我正在尝试将点导航与轮播类型的 div 布局链接起来，并且需要在单击每个特定点时显示正确的 div，反之亦然，以便在显示特定 div 时点处于活动状态。第二部分很重要，因为我有不止一种导航形式。

这里是项目http://polyhedron.io/

点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 {

        }
    });
});

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

Answer 1

这应该可行：

$(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() 的简写，即一个 jQuery 对象。所以不需要再次包装它。

绑定点击事件后，从被点击的元素（id）中获取信息，进行preform类检查，然后需要在第二个菜单中查找与被点击项的id匹配的类的元素

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

由于您只需单击一下即可查看所有$project 元素，因此您不需要each()。只需检查里面的列表项是否有该类，如果有，则添加一个新的。

希望这会有所帮助。

编辑

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

编辑 2

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

Answer 2

$(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，这是您不想要的！