Question

我正在制作一个词汇表，其中包含列表中的字母，以及另一个列表中的内容。单击每个字母将显示该字母的内容，如下所示：

<ul class="alphabet">
    <li class="selected"><a class="alpha alpha-a">A</a></li>
    <li><a class="alpha alpha-b">B</a></li>
    <li><a class="alpha alpha-c">C</a></li>
    <li><a class="alpha alpha-d">D</a></li>
    <li><a class="alpha alpha-e">E</a></li>
    <li><a class="alpha alpha-f">F</a></li>
    <li><a class="alpha alpha-g">G</a></li>
    <li><a class="alpha alpha-h">H</a></li>
    <li><a class="alpha alpha-i">I</a></li>
    <li><a class="alpha alpha-j">J</a></li>
    <li><a class="alpha alpha-k">K</a></li>
    <li><a class="alpha alpha-l">L</a></li>
    <li><a class="alpha alpha-m">M</a></li>
    <li><a class="alpha alpha-n">N</a></li>
    <li><a class="alpha alpha-o">O</a></li>
    <li><a class="alpha alpha-p">P</a></li>
    <li><a class="alpha alpha-q">Q</a></li>
    <li><a class="alpha alpha-r">R</a></li>
    <li><a class="alpha alpha-s">S</a></li>
    <li><a class="alpha alpha-t">T</a></li>
    <li><a class="alpha alpha-u">U</a></li>
    <li><a class="alpha alpha-v">V</a></li>
    <li><a class="alpha alpha-w">W</a></li>
    <li><a class="alpha alpha-x">X</a></li>
    <li><a class="alpha alpha-y">Y</a></li>
    <li><a class="alpha alpha-z">Z</a></li>
</ul>
<ul class="list-objects list-object-a selected">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
<ul class="list-objects list-object-b">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
etc.

<script>
    $(".alphabet .alpha-a").click(function() {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-a").addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
    $(".alphabet .alpha-b").click(function() {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-b").addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
    etc.
</script>

我想简化javascript，因此我不必为每个字母重复代码段。有任何想法吗？ @Muhammad Umer？谢谢:)）

Answer 1

试试这个：

使用href作为您要显示的列表的参考。

例如，点击<a class="alpha" href="#object-a">A</a> 将显示具有id="object-a"

的列表

检查以下代码并尝试运行它。

$(".alphabet li").click(function() {
  $($(this).find('a').data('href')).addClass('selected').siblings('.list-objects.selected').removeClass('selected');
  $(this).addClass('selected').siblings('.selected').removeClass('selected');
});

.alphabet li {
  cursor: pointer;
}
.alphabet .selected {
  text-decoration: underline;
}
.list-objects {
  display: none;
}
.list-objects.selected {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="alphabet">
  <li class="selected">
    <a class="alpha" data-href="#object-a">A</a>
  </li>
  <li>
    <a class="alpha" data-href="#object-b">B</a>
  </li>
</ul>

<ul id="object-a" class="list-objects selected">
  <li>
    <a href="">Item A1</a>
  </li>
  <li>
    <a href="">Item A2</a>
  </li>
  <li>
    <a href="">Item A3</a>
  </li>
</ul>

<ul id="object-b" class="list-objects">
  <li>
    <a href="">Item B1</a>
  </li>
  <li>
    <a href="">Item B2</a>
  </li>
  <li>
    <a href="">Item B3</a>
  </li>
</ul>

Answer 2

尝试这一个。当点击锚标记时，添加并从父项中删除slected Class。然后将锚标记的文本装入并附加到<ul>标记类，其中存在各自的锚标记内容。我的意思是说如果你点击＆＃39; B＆＃39;它应该选择.list-object-b而不是.list-object-a。代码$("ul.list-object-" + $(this).text().toLowerCase())执行相同的操作

$(document).ready(function () {
    $('[class^="alpha alpha-"]').click(function () {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-" + $(this).text().toLowerCase()).addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
});

Answer 3

您可以使用通配符：

$(class^=".alpha .alpha-").click(function() {
    $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
    $("ul.list-object-a").addClass("selected").siblings("ul.list-objects").removeClass("selected");
});

在Jquery中创建词汇表字母表

3 个答案: