-2

我有一个页面，其中包含一些按字母顺序排列的信息，每个起始字母都有几个段落。在该页面的顶部，我希望字母 AZ 可单击，如果我单击其中一个字母，则仅应显示包含带有该字母的段落的 div。

例子：

A B C D

<div id=A>
Amsterdam
Ankara
</div>
<div id=B>
Brussel
Budapest
</div>
<div id=C>
Calgary
Cairo
</div>

我找到了一些示例，但是每个字母都有一个脚本函数，我只想要一个函数来识别选择了哪个字母，隐藏所有 div AZ 并显示单击字母的 div。

感谢您的任何提示！

4

6 回答 6

3

您应该为链接（我将使用letterLink）和 div（我将使用letterDiv）提供一个通用类。

$("a.letterLink").click(function() {
    $(".letterDiv").hide();
    var letter = $(this).text();
    $("#" + letter).show();
});
于 2013-09-12T21:09:42.750 回答
1

这里有一些提示：

  1. 每个字母都必须是一个链接，这意味着您必须将每个字母包装在标签中。您可以使用 JavaScript 或手动执行此操作，如果您真的想要的话。

  2. 将您的 div id 括在引号 "" 中以符合某些标准。

  3. 在每个可显示的 div 上放置一个类。

  4. 在每个链接上放置一个类（或使用特定类围绕链接包装一个 div 并使用事件委托，请参阅http://www.sitepoint.com/event-delegation-with-jquery/

  5. 使用 jQuery 将侦听器附加到链接类。

    1. 在侦听器中，检测单击了哪个字母（根据您执行第 4 步的方法而有所不同。

    2. 隐藏所有可显示的 div。

    3. 显示 id 为被点击的字母的 div。

没有代码，所有提示。

于 2013-09-12T21:15:03.597 回答
0

由于您使用的是 jQuery，这可能非常简单 :) 只需为所有字母类别指定一个特定类，例如 class="category"，然后使用 jQuery 隐藏它们并给定传递的对象集，然后将其显示回块。

$("a.categoryLink").click(function() {

    $(".category").hide();

    var letter = $(this).text();

    $("#" + letter").show();

});
于 2013-09-12T21:13:10.390 回答
0

我对数据属性有轻微的痴迷，因此更喜欢这种方法。

HTML：

<div class="links">
    <a href="#">A</a>
    <a href="#">B</a>
</div>
<div data-letter="A">
    Aadvark
    Apple
</div>
<div data-letter="B">
    Banana
    Bermuda
</div>

jQuery：

$(".links a").click(function(){
    $("[data-letter]").hide();
    var letter = $(this).text();
    $("[data-letter="+letter+"]").show();
});
于 2013-09-12T21:22:24.450 回答
0

这是一个很好的方法。

将您的信件链接放在一个容器中。A B C D...

给你的 div 添加一个类

<div id='A' class='content'>

向容器添加点击事件而不是字母（1 vs 26）

// cache the collection
var content_divs = $('.content');

$('#letters').on('click', 'a', function() {
  $(content_divs).hide();      
  var letter = $(this).text();
  $('#' + letter).show();
});
于 2013-09-12T21:23:13.810 回答
0

首先，感谢所有以富有成效的方式做出回应的人。谢谢你。

第二，这是我想出的：http: //jsfiddle.net/RMra8/

     $(document).ready(function () {
        $('#divSelect a').click(function (e) {

            var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            for (var i = 0; i < str.length; i++) {
                var nextChar = str.charAt(i);
                $('#' + nextChar).fadeOut();
            }
            var txt = $(e.target).text();
            $('#' + txt).delay(400).fadeIn();
        });
    });
于 2013-09-13T14:45:22.870 回答