javascript - 在 jquery 函数中将动态值作为 id 传递

Question

我正在尝试将动态值传递给 jquery 函数。

这段代码将完美地工作:(当我传递特定的 id 本身时)

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

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

但以下代码似乎不起作用:(尝试动态传递)

$('#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. 您的选择器是错误的，名称位于 anchor 标记中而不是 ul 中

$('#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>