Question

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>
<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。

Answer 1

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

Answer 2

快速又脏，但应该有效： 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;
});

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

2 个答案: