Question

我已经获得了以下代码

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

我尝试了以下代码，但是当我点击链接时，我希望它根据链接的ID显示div，但它不起作用

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

Answer 1

更改

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

到

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

Answer 2

您的网页上有2个元素具有相同的ID，并且它们是数字，根据经验可能会导致各种不良行为。

你想要的方式如下：

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

我们使用data-show元素来存储我们想要显示的元素的id值，在javascript中我们现在可以这样做：

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

还要注意，在调用show()

时，我被添加到变量前面的＃（for id）中

小提琴演示：http://jsfiddle.net/5U8sW/

Answer 3

嗯，这是一个很快的回答：

问题是您在DOM元素上不能有重复的ID。它们应该是独特的。您可以使用数据属性来执行您想要的操作。

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>

和你的Javascript：

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

Answer 4

使用javascript或jQuery搜索具有相同ID的元素时，只选择第一个元素。我建议你重命名要显示的元素的ID。以下面的代码为例。

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

首先，您的ID应该是唯一的。因此，<div>和<a>不得共享相似的ID名称。此外，禁止以数字开头的HTML4.1 ID中的AFAIK（？）

尝试我上面编码的样本。由于您使用的是锚点，因此引用“href”属性在语义上更正确。

干杯！

如何通过动态ID显示div？

5 个答案:

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

5 个答案:

如何通过动态ID显示div？