jquery：使用“字母”作为编号

我正在构建菜单，它将显示一个字母列表，并根据用户选择的内容加载合适的页面。我可以加载一个字母，但我怎样才能使用“字母”作为ID，所以我不需要为每个字母重复相同的jQuery代码。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>

来源

2012-11-29 teslasimus

为什么不使用'href'来存储url？ –

您可以使用此：

$('[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-29 18:59:32

+1符合OP精确要求的优雅解决方案。 – JcFx

是那个bug ..？。以前你的代码并没有被格式化为代码，即使4个空格 –

非常酷。 '^'做什么？ – Stefan

给字母A类（例如.letter）可能是一个解决方案。您可以通过隐藏.letter来隐藏所有的字母，并通过特定的目标ID来显示。因此，该功能应该是$('.letter').click(function(){});

来源

2012-11-29 19:00:36 BazzyTK

给每一个有没有造型类：

<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-29 19:01:28

添加class，添加数据attribute，然后从容器中的所有孩子....

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

代码：

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

小提琴样本：http://jsfiddle.net/TwDmm/2/

来源

2012-11-29 19:01:32 Stefan

我会建议使用字母为一类。

然后，您可以做一个选择上

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

});

来源

2012-11-29 19:02:15 ajtrichards

我相信这是你在找什么（减去警报（...）的一部分，这是作秀）：

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

Here is the fiddle

来源

2012-11-29 19:07:26 TNCodeMonkey

这是我会做什么，使用数据属性：

个

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

您可以访问到所选择的letetr在selectedLetter变种。这比其他一些解决方案更有效率，因为它只附加一个事件处理程序，而不是每个单独的字母的单独事件处理程序。

来源

2012-11-29 19:09:37

jquery：使用“字母”作为编号

回答

相关问题