如何通过动态ID显​​示div？

Question

I've got the follow code

<ul>
    <li><a href="#" class="chooserClass" id="1">Google</a></li>
    <li><a href="#" class="chooserClass" id="2">Facebook</a></li>
</ul>

<!- hidden divs ->
<div id="1" style="display:none;">Email</div>
<div id="2" style="display:none;"">Social Network</div>

I tried the following code but when I click on a link i would like it to show a div based on the id of the link but it is not working

<script type="text/javascript">
$(document).ready(function()
{
    $(".chooserClass").click(function() {
        var show = $(this).attr('id');
        $(show).show();
    });
});
</script>

Answer 1

Change

var show = $(this).attr('id');
$(show).show();

to

var show = $(this).attr('id');
$('#'+ show).show();

Answer 2

You have 2 elements on your page that have th same id, and they are numeric which from experience can cause all kinds of undesired behavior.

The way you want to this is like so:

<ul>
    <li><a href="#" class="chooserClass" data-show="element1">Google</a></li>
    <li><a href="#" class="chooserClass" data-show="element2">Facebook</a></li>
</ul>

<!- hidden divs ->
<div id="element1" style="display:none;">Email</div>
<div id="element2" style="display:none;">Social Network</div>

We use a data-show element to store the value of the id of the element that we want to display, in the javascript we can now do this:

<script type="text/javascript">
$(document).ready(function()
{
    $(".chooserClass").click(function() {
        var show = $(this).data('show');
        $('#' + show).show();
    });
});
</script>

also note that I am added in the # (for id) in front of the variable when calling the show()

Fiddle demo: http://jsfiddle.net/5U8sW/

Answer 3

Well, here's a quick an dirty answer:

The problem is that you can't have duplicate id's on DOM elements. They should be unique. You can use a data- property to do what you are wanting.

http://jsfiddle.net/725XT/

<ul>
    <li><a href="#" class="chooserClass" data-div-id="1">Google</a></li>
    <li><a href="#" class="chooserClass" data-div-id="2">Facebook</a></li>
</ul>

<!- hidden divs ->
<div id="1" style="display:none;">Email</div>
<div id="2" style="display:none;">Social Network</div>

And your Javascript:

$(document).ready(function()
{
    $(".chooserClass").click(function() {
        var show = $(this).data('div-id');
        console.log(show);
        $('#' + show).show();
    });
});

Answer 4

When using javascript or jQuery to search for elements with the same IDs, only the first element is picked. I suggest you rename the IDs of the elements to be shown. Take the code below for example.

HTML

<ul>
    <li><a href="#" class="chooserClass" id="1">Google</a></li>
    <li><a href="#" class="chooserClass" id="2">Facebook</a></li>
</ul>

<!- hidden divs ->
<div id="d_1" style="display:none;">Email</div>
<div id="d_2" style="display:none;"">Social Network</div>

jQuery

<script type="text/javascript">
$(document).ready(function()
{
    $(".chooserClass").click(function() {
        var id = $(this).attr('id');
        $('#d_'+id).show();
    });
});
</script>

Answer 5

jsFiddle

First of all, your IDs should be unique. Thus, the <div> and the <a> must not share the similar ID names. Additionally, AFAIK, in HTML4.1 IDs starting with digits are prohibited(?)

Try the sample I coded above. Since you are using anchors, referencing the 'href' attribute would be more semantically correct.

Cheers!