Question

我试图将点导航与轮播类型div布局相关联，并且需要在单击每个特定点时显示正确的div，反之亦然，因此点在其中是活动的显示特定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 {

        }
    });
});

这是我能得到的最接近的，但它目前只是添加＆＃34;选择＆＃34;到每个列表项。

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对象。所以不需要再包装它。

在绑定click事件后，您从单击的元素（id）获取信息，预先形成类检查，然后您需要在第二个菜单中查找与所单击的项的ID匹配的类的元素< / p>

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

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

希望这有帮助。

修改

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

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

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

2 个答案: