Question

点击以使用javascript

显示id的多个元素参考

这是我的代码，点击链接CLICK HERE了解show elements。

首次点击CLICK HERE我要展示one和111（它的身份证号码show_1）

然后第二次点击CLICK HERE我要展示two和222（它的身份证号show_2）

然后第三次点击CLICK HERE我要展示three和333（它的身份证号show_3）

第四次点击CLICK HERE我要展示four和444（它的身份证号码show_4）

第五次点击CLICK HERE我要展示five和555（它的身份证号show_5）

但是当我测试我的代码时，它并不能正常工作。它仅显示

one
two
three
four
five

我该怎么做？

http://jsfiddle.net/x53eh96o/12/

<style type="text/css">
    div{
    display: none;
}
</style>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
  <tr>
    <td valign="top" style=" width: 17%; "> 
      <div id="show_1">one</div>
      <div id="show_2">two</div>
      <div id="show_3">three</div>
      <div id="show_4">four</div>
      <div id="show_5">five</div>
    </td>   
    <td valign="top" style=" width: 17%; "> 
      <div id="show_1">111</div>
      <div id="show_2">222</div>
      <div id="show_3">333</div>
      <div id="show_4">444</div>
      <div id="show_5">555</div>
    </td> 
  </tr>       
<tbody>      
</table>     
<div id="test_link" onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var show = 0;
    function myFunction() {
        document.getElementById('show_' + (show += 1)).style.display = "block";    
        if(show == "5")
        {
            document.getElementById("test_link").style.display = "none";
        }
    }
</script>

Answer 1

首先id应该是唯一的，因此您需要使用class。现在，要按类名获取dom元素，请使用 getElementsByClassName() ，它将返回dom对象数组。

＆＃13;

var show = 0;

function myFunction() {
  var div = document.getElementsByClassName('show_' + (++show))
  div[0].style.display = "block";
  div[1].style.display = "block";

  if (show == "5") {
    document.getElementById("test_link").style.display = "none";
  }
}

＆＃13;

div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td valign="top" style=" width: 17%; ">
        <div class="show_1">one</div>
        <div class="show_2">two</div>
        <div class="show_3">three</div>
        <div class="show_4">four</div>
        <div class="show_5">five</div>
      </td>
      <td valign="top" style=" width: 17%; ">
        <div class="show_1">111</div>
        <div class="show_2">222</div>
        <div class="show_3">333</div>
        <div class="show_4">444</div>
        <div class="show_5">555</div>
      </td>
    </tr>
    <tbody>
</table>
<div id="test_link" onclick="myFunction()" style="display: block;">CLICK HERE</div>

＆＃13;

使用jQuery

＆＃13;

var show = 0;

$("#test_link").click(function() {
  $('.show_' + (++show)).css('display','block');
  if (show == 5)
    $(this).css('display','none');
});

＆＃13;

div {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td valign="top" style=" width: 17%; ">
        <div class="show_1">one</div>
        <div class="show_2">two</div>
        <div class="show_3">three</div>
        <div class="show_4">four</div>
        <div class="show_5">five</div>
      </td>
      <td valign="top" style=" width: 17%; ">
        <div class="show_1">111</div>
        <div class="show_2">222</div>
        <div class="show_3">333</div>
        <div class="show_4">444</div>
        <div class="show_5">555</div>
      </td>
    </tr>
    <tbody>
</table>
<div id="test_link" style="display: block;">CLICK HERE</div>

＆＃13;

Answer 2

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
  <tr>
    <td valign="top" style=" width: 17%; "> 
      <div id="show_1" name="show_1">one</div>
      <div id="show_2">two</div>
      <div id="show_3">three</div>
      <div id="show_4">four</div>
      <div id="show_5">five</div>
    </td>   
    <td valign="top" style=" width: 17%; "> 
      <div id="show_1" name="show_1">111</div>
      <div id="show_2">222</div>
      <div id="show_3">333</div>
      <div id="show_4">444</div>
      <div id="show_5">555</div>
    </td> 
  </tr>       
<tbody>      
</table>     
<div id="test_link" onclick="myFunction()" style="display: block;">CLICK HERE</div>


<script>
    var show = 0;
    function myFunction() {
       document.getElementsByName("show_1")[0].style.display="block";
      document.getElementsByName("show_1")[1].style.display="block";

    }
</script>

Answer 3

您需要在每个元素中使用getElementsByClassName()任何循环。

div {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td valign="top" style=" width: 17%; ">
                <div class="show_1">one</div>
                <div class="show_2">two</div>
                <div class="show_3">three</div>
                <div class="show_4">four</div>
                <div class="show_5">five</div>
            </td>
            <td valign="top" style=" width: 17%; ">
                <div class="show_1">111</div>
                <div class="show_2">222</div>
                <div class="show_3">333</div>
                <div class="show_4">444</div>
                <div class="show_5">555</div>
            </td>
        </tr>
        <tbody>
</table>
<div id="test_link" onclick="myFunction()" style="display: block;">CLICK HERE</div>
<script>
    var show = 0;

    function myFunction() {
        //document.getElementsByClassName('show_' + (show += 1)).style.display = "block";
        var elems = document.getElementsByClassName('show_' + (show += 1))
        for (var i = 0; i < elems.length; i++) {
            elems[i].style.display = "block";
        }
        if (show == "5") {
            document.getElementById("test_link").style.display = "none";
        }
    }
</script>

单击以使用javascript显示id的多个元素ref

3 个答案: