javascript - passing dynamic values as id in jquery function - Stack Overflow

admin管理员组

文章数量:1327880

I'm trying to pass the dynamic values to the jquery function.

this code will work perfectly fine:(when I passing the particular id itself)

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

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

but the following code doesn't seem to work:(trying to pass dynamically)

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

here is my 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>

Is error in passing the variable to jquery?

I'm trying to pass the dynamic values to the jquery function.

this code will work perfectly fine:(when I passing the particular id itself)

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

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

but the following code doesn't seem to work:(trying to pass dynamically)

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

here is my 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>

Is error in passing the variable to jquery?

• javascript
• jquery
• html

Share Improve this question Follow asked Jul 19, 2017 at 8:43 Karthik SamyakKarthik Samyak 50722 gold badges88 silver badges1919 bronze badges 2

• 2 The #slidedown element has no name, that's why it isn't working – adeneo Commented Jul 19, 2017 at 8:46
• Thank you for your time to get my error correct :) – Karthik Samyak Commented Jul 19, 2017 at 10:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

1. You selector is wrong the name is in the anchor tag not in the ul

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

<script src="https://ajax.googleapis./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>

本文标签： javascriptpassing dynamic values as id in jquery functionStack Overflow