如何爲具有不同ID的元素使用相同的JQuery方法？

HTML文件是：如何爲具有不同ID的元素使用相同的JQuery方法？

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> 
    <script src="myjquery.js"></script> 
    </head> 
<a id='mylink1' href='#'>Click to Display First div</a> <br> 
<div id='mydv1' style='display: none;' > I am First div</div> 

<a id='mylink2' href='#'>Click to Display Second div</a> <br> 
<div id='mydv2' style='display: none;' > I am Second div</div>  
</body>

myjquery.js文件是：

$(document).ready(function(){ 

    $('[id^=mylink]').click(function(){ 
    $('[id^=mydv]').show(); 
     return false; 
    }); 
});

其實我不想寫兩個單獨的jQuery方法$('#mylink1').click(function()和$('#mylink2').click(function()

但是使用像上面那樣的單個Jquery方法，即$('[id^=mylink]').click(function()會導致顯示兩個div，即使只通過單擊一個超鏈接也是如此。

以上Jquery方法需要進行哪些修正，以便在超鏈接上單擊時只顯示相應的div。

來源

2016-11-03 Sajjad

的處理程序中，使用$（this）來指點擊的元素 – aw04

HTML代碼

<input type='button' id='mylink1'/> 
<div id='mydv1' style='display:none'> 
I am first div 
</div> 
<input type='button' id='mylink2'/> 
<div id='mydv2' style='display:none'> 
I am second div 
</div>

jQuery代碼

$('[id^=mylink]').click(function(event){ 
    var str=event.target.id; 
    var Id='#mydv'+str.slice(str.indexOf('mylink'),str.length) 
    $(Id).show(); 
    return false; 
    });

小提琴防爆here

來源

2016-11-03 14:52:23 RonyLoud

運作良好，只有myLink的和mydv 0或1或2或結束...高達9.請修改海峽。 slice（str.indexOf（'vish'），str.length）部分，這樣它可以工作，即使mylink和mydv以0或1或2結尾或... ...最多四位數字，如mylink4258和mydv4258 – Sajjad

哦，我發現解決方案。它應該是str.slice（6，str.length）。現在它可以工作，不管mylink和mydv之後的字母長度是多少。 Thnx兄弟 – Sajjad

快速和骯髒的，但應該工作： HTML文件

<html> 
    <head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "></script> 
<script src="myjquery.js"></script> 
    </head> 
<body> 
    <div class="wrapper"> 
     <a id='mylink1' href='#'>Click to Display First div</a> <br> 
     <div id='mydv1' class="somediv" style='display: none;' > I am First div</div> 
    </div> 
    <div class="wrapper"> 
     <a id='mylink2' href='#'>Click to Display Second div</a> <br> 
     <div id='mydv2' class="somediv" style='display: none;' > I am Second div</div> 
    </div> 
</body> 
</html>

個JS文件

$(document).ready(function(){ 

    $('.wrapper a').click(function(){ 
     $(this).parents('.wrapper').find('.somediv').show(); 
     return false; 
});

來源

2016-11-03 14:55:59 VGD

回答

相關問題