Question

我有一个页面，其中包含一些字母信息，每个起始字母都有几个段落。在该页面的顶部，我希望字母A-Z可以点击，如果我点击其中一个字母，只显示包含带字母的段落的div。

示例：

A B C D

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

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

感谢任何提示！

Answer 1

您的链接应该有一个公共类（我将使用letterLink）以及您的div（我将使用letterDiv）。

$("a.letterLink").click(function() {
    $(".letterDiv").hide();
    var letter = $(this).text();
    $("#" + letter).show();
});

Answer 2

以下是一些提示：

每个字母都必须是一个链接，这意味着您必须将每个字母包装在标签中。您可以使用JavaScript或手动执行此操作（
将您的div ID包含在引号“”中以符合某些标准。
在每个可展示的div上放一个课程。
在每个链接上放置一个类（或使用特定类包围链接的div并使用事件委派，请参阅http://www.sitepoint.com/event-delegation-with-jquery/
使用jQuery将侦听器附加到链接类。
1. 在侦听器中，检测已单击的字母（根据您对第4步的处理方式而有所不同。
2. 隐藏所有可显示的div。
3. 显示id为已点击字母的div。

没有代码，所有提示。

Answer 3

由于你使用的是jQuery，这可能非常简单:)只需给所有字母类别一个特定的类，如class =“category”，然后使用jQuery隐藏它们并给定一个传递的对象设置它的显示回到块。

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

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

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

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

});

Answer 4

我对数据属性有一种温和的痴迷，所以更喜欢这种方法。

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();
});

Answer 5

这是一个很好的方法。

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

在div中添加一个类

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

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

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

$('#letters').on('click', 'a', function() {
  $(content_divs).hide();      
  var letter = $(this).text();
  $('#' + letter).show();
});

Answer 6

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

第二，这就是我想出的：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();
        });
    });

根据链接点击使用jquery切换DIV可见性

6 个答案: