jquery関数で動的値をidとして渡します。

Question

動的値をjquery関数に渡そうとしています。

$('#slidedown').click(function() { 

    $('#page1').slideDown(); 
}); 

（私は特定のID自体を渡すとき）が、次のコードは動作していないよう：

このコードは完全に正常に動作します

$('#slidedown').click(function() { 
    var name = $(this).attr("name"); 
    $('#' + name).slideDown(); 
}); 

（動的に合格しようとしています）ここ

は私のHTMLです：

<div id="page1" style="display: none;"> 
<p>Lorem ipsum dolor sit amet1.</p> 
</div><!--end div 1--> 
<div id="page2" style="display: none;"> 
<p>Lorem ipsum dolor sit amet2.</p> 
</div><!--end div 2--> 
<div id="page3" style="display: none;"> 
<p>Lorem ipsum dolor sit amet3.</p> 
</div><!--end div 3--> 
<div id="page4" style="display: none;"> 
<p>Lorem ipsum dolor sit amet4.</p> 
</div><!--end div 4--> 

<ul class="pagination pagination-lg" id="slidedown"> 

     <li><a href="#" name="page1">1</a></li> 
     <li><a href="#" name="page2">2</a></li> 
     <li><a href="#" name="page3">3</a></li> 
     <li><a href="#" name="page4>4</a></li> 

     </ul> 

はjqueryのに変数を渡すに誤りですか？

Answer 1

1. あなたのセレクタは

$('#slidedown li a').click(function() {//check selector 
 
    var name = $(this).attr("name"); 
 
    $('#' + name).slideDown(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="page1" style="display: none;"> 
 
<p>Lorem ipsum dolor sit amet1.</p> 
 
</div><!--end div 1--> 
 
<div id="page2" style="display: none;"> 
 
<p>Lorem ipsum dolor sit amet2.</p> 
 
</div><!--end div 2--> 
 
<div id="page3" style="display: none;"> 
 
<p>Lorem ipsum dolor sit amet3.</p> 
 
</div><!--end div 3--> 
 
<div id="page4" style="display: none;"> 
 
<p>Lorem ipsum dolor sit amet4.</p> 
 
</div><!--end div 4--> 
 

 
<ul class="pagination pagination-lg" id="slidedown"> 
 

 
     <li><a href="#" name="page1">1</a></li> 
 
     <li><a href="#" name="page2">2</a></li> 
 
     <li><a href="#" name="page3">3</a></li> 
 
     <li><a href="#" name="page4">4</a></li> 
 

 
     </ul>