用JavaScript在同一框架中的另一个对象替换一个对象？

Question

我已经在首页（index.html）上创建了带有to选项的列表。 我遇到的问题是运行代码时； 如果在“list_row1”，然后“表1”显示了用户点击（一切都很正常），并在此之后，如果在“list_row2”，然后“表2”显示了100-200px下面表1的用户点击（一切不工作的伟大）。 我希望将table1替换为table2，反之亦然，即在该位置单击该人单击的list（list_row1和list_row2）选项。

例如，我希望将红色圆圈替换为黑色圆圈，反之亦然。

这是我的index.html ，下面是JavaScript代码：

 $(function(){ $('#list_row1').on('click',function(){ $('#table2').hide(); $('#table1').toggle(); }); $('#list_row2').on('click',function(){ $('#table1').hide(); $('#table2').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <ul class="list-group"> <div id = "list_row1"> <li class="list-group-item">Exhaust Temperature</li> </div> <div id = "list_row2"> <li class="list-group-item">Cylinder Pressure</li> </div> </ul> </div> <div id = "table1"></div> <div id = "table1"></div> 

Answer 1

请检查您的代码。 您有两个具有相同ID的div

<div id = "table1"></div>
<div id = "table1"></div>

Answer 2

这两个表的ID是相同的。 这应该是您的代码：

<div>
  <ul class="list-group">
    <div id = "list_row1">
      <li class="list-group-item">Exhaust Temperature</li>
    </div>
    <div id = "list_row2">
      <li class="list-group-item">Cylinder Pressure</li>
    </div>
  </ul>
</div>

<div id = "table1">table1</div>
<div id = "table2">table2</div>
<script>
  $(function(){
    $('#list_row1').on('click',function(){
      $('#table2').hide();
      $('#table1').toggle();
    });

    $('#list_row2').on('click',function(){
      $('#table1').hide();
      $('#table2').toggle();
    });                     
  });
</script>

Answer 3

嗨，您的两个表都有一个相同的ID'table1'。 还有一个小建议，可将两个表div隐藏在负载本身处。 我将在下面发布新的JavaScript代码。

$(function(){
  $('#table2').hide();
  $('#table1').hide();
  $('#list_row1').on('click',function(){
    $('#table2').hide();
    $('#table1').toggle();
  });

  $('#list_row2').on('click',function(){
    $('#table1').hide();
    $('#table2').toggle();
  });                     
});

Answer 4

这是一个示例，说明如何在切换两个“表” div的同时还改善了标记： http : //jsfiddle.net/8fr0484L/3/

在<li>列表项中使用<a>锚标记，而不是尝试使用div。 这将使您能够利用锚标记的默认可点击行为。

<ul class="list-group">
    <li class="list-group-item"><a href='#' id='list_row1'>Exhaust Temperature</a></li>
    <li class="list-group-item"><a href='#' id='list_row2'>Cylinder Pressure</a></li>
</ul>

在代码中，假设您当时不知道用户要查看的内容，那么一开始（页面加载时）可能需要隐藏“表” div。

        // hide the tables by default when page loads
        $('#table1').hide();
        $('#table2').hide();

        $('#list_row1').on('click',function(event){
            event.preventDefault(); // halt the anchor tag's default behaviour
            $('#table2').hide();
            $('#table1').show();
        });

        $('#list_row2').on('click',function(event){
            event.preventDefault(); // halt the anchor tag's default behaviour
            $('#table1').hide();
            $('#table2').show();
        });                     

Answer 5

<ul class="list-group">
    <div id = "list_row1"><li class="list-group-item">Exhaust Temperature</li></div>
    <div id = "list_row2"><li class="list-group-item">Cylinder Pressure</li></div>
</ul>
</div>

<div id = "table1">abc</div>
<div id = "table2">pqr</div>

<script>
$(function(){
    $('#list_row1').on('click',function(){
        $('#table2').css({
            visibility : "hidden"
        }); 
        $('#table1').css({
            visibility : "visible"
        });
    });

    $('#list_row2').on('click',function(){
         $('#table1').css({
             visibility : "hidden"
         }); 
         $('#table2').css({
             visibility : "visible"
         });
    });                     
});
</script>