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