Question

我是JQuery的新手，我有以下问题。所以我有一个包含此HTML代码的 JSP 页面：

<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}">
    <div class="news_box news_box_01"></div>
</a>

<!-- Bottone relativo ai progetti PNSD: -->
<a title="PNSDe" href="javascript: void(0)" id="showPnsd_${item.index}">
    <div class="news_box news_box_02"></div>
</a>

正如您所看到的 a 标记**的ID类似 id =“showWifi _ $ {item.index}”和 id =“ showPnsd _ $ {item.index}“即可。所以这些id正在创建一个 item.index （一个渐进式int），它可以呈现像 showWifi_1 ，showWifi_2 **，etcetc这样的独特ID。

现在我必须使用JQuery来处理用户点击这些链接并进入这个JQuery脚本的情况，我必须检索特定点击链接的特定ID。

例如，如果用户点击ID showWifi_1 的 a 标记，则必须检索此值。

如果我在ID结尾处没有这个渐进价值（ $ {item.index} ），我知道我可以这样做：

$(document).ready(function(){
    // Select the 
    $("#showWifi").click(function(){
        //$("p").hide();
        alert("SHOW WIFI");
    });

    $("#showPnsd").click(function(){
        //$("p").show();
        aler("SHOW PNSD");
    });
});

问题在于我不能使用$（“＃showWifi”）和$（“＃showPnsd”）来选择我的 a 标记，因为ID后跟 $ {item.index}

我该如何处理这种情况？我可以看到类似的内容：当用户点击标记 id 时，以 showWifi _ 或 showPnsd _ 执行脚本并检索_字符后的数值？

TNX

Answer 1

尝试将attribute starts与选择器

一起使用

$("[id^='showWifi_']").click(function(){

和

$("[id^='showPnsd_']").click(function(){

但是，不是使用属性选择器，而是最好将类设置为这些元素，并使用类选择器为其绑定事件。类选择器比属性选择器更有效。

Answer 2

您可以使用通配符或startsWith选择器：

$("[id^='showWifi_']")
$("[id^='showPnsd_']")

以上选择以id和showWifi_开头的showPnsd_。如果您想将您的选择限制在<a>元素，那么您可以使用：

$("a[id^='showWifi_']")
$("a[id^='showPnsd_']")

如何使用JQuery来处理具有以特定字符串开头的id的链接？

2 个答案: