2

我正在构建菜单，该菜单将显示字母列表，然后根据用户选择的内容加载正确的页面。我可以加载一个字母，但我怎么能使用“字母”作为 id，所以我不需要为每个字母复制相同的 jquery 代码。

<div id="idshow"><a id="hidelinks" href="#">Hide</a> <br /><br /></div>

<div id="letter_a"><a id="success_a" href="#">A Show</a></div>
<div id="letter_b"><a id="success_b" href="#">B Show</a></div>
<div id="letter_c"><a id="success_c" href="#">C Show</a></div>

<div id="loadpage"></div>


<script>
$("#idshow").hide();

$("#success_a").click(function () {

        $("#idshow").show();
        $("#letter").hide();


        $("#loadpage").load("letter_a.html", function(response, status, xhr) {
                if (status == "error") {var msg = "Sorry but there was an error: ";$("#error").html(msg + xhr.status + " " + xhr.statusText);}});
        });

        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
});

</script>
4

7 回答 7

5

你可以使用这个：

 $('[id^="success"]').click(function () {
     // the letter is the last character of the id
     var letter = this.id.slice(-1); 
     ...
     $("#loadpage").load("letter_"+letter+".html" ...
于 2012-11-29T18:59:32.357 回答
1

这就是我要做的，使用数据属性：

<div id="letters">
    <div><a data-letter="a" href="#">A Show</a></div>
    <div><a data-letter="b" href="#">B Show</a></div>
    <div><a data-letter="c" href="#">C Show</a></div>
</div>

JS：

$('.letters').on('click','a[data-letter]',function() {
    var selectedLetter = $(this).data('letter');
    //rest of code here
});

selectedLetter您可以访问var中选定的字母。这也比其他一些解决方案更有效，因为它只附加一个事件处理程序，而不是为每个字母附加一个单独的事件处理程序。

于 2012-11-29T19:09:37.320 回答
0

我相信这就是您正在寻找的（减去 alert(...) 部分，这只是为了展示）：

$("#idshow").hide();

$(".letterLink").click(function () {

        $("#idshow").show();
        $("#letter").hide();

var url = $(this).attr('id') + ".html";
 alert("loading " + url);   

        $("#loadpage").load(url, function(response, status, xhr) {
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }});
        $('#hidelinks').click(function() {
                $('#letter_content').slideUp();
                $("#idshow").hide();
                $("#letter").show();
        });
});

这是小提琴

​
于 2012-11-29T19:07:26.167 回答
0

我建议使用字母作为一个类。

然后你可以做一个选择

$(".letters").click(function(){
   // You then access the clicked object via $(this).

});
于 2012-11-29T19:02:15.647 回答
0

给字母一个类（例如.letter）可能是一个解决方案。您可以通过隐藏 .letter 来隐藏所有字母，并通过专门针对其 id 来显示一个。因此函数应该是$('.letter').click(function(){});

于 2012-11-29T19:00:36.097 回答
0

给每个人一个没有样式的类：

<div id="letter_a"><a id="success_a" class="letters" href="#">A Show</a></div>
<div id="letter_b"><a id="success_b" class="letters" href="#">B Show</a></div>
<div id="letter_c"><a id="success_c" class="letters" href="#">C Show</a></div>

$('.letter').click(function(event) {
   // ...
});
于 2012-11-29T19:01:28.750 回答
0

添加一个类，添加一个数据属性，从容器中选择所有子项......

只选择所有以字符串开头的 id 是不可能的！ 那么可以只选择id的一部分。请参阅dystroy的答案....

代码：

$('[id^="success"]').each(function() {
    debugger;
    $('body').append($(this).text());
    });​

小提琴示例：http: //jsfiddle.net/TwDmm/2/

于 2012-11-29T19:01:32.137 回答