Question

我有一系列要显示的表格，具体取决于用户点击的googlemaps api多边形。代码如下：

HTML

<div id="adilaDIV" class="boxOne" style="display:none">
  <table id="adilaTable" class="table" >
    <tr>
      <td>ADILABAD</td>
    </tr>
    <tr>
      <td>Population</td>
      <td>2,930,604</td>
    </tr>
    <tr>
      <td>Percent Adults</td>
      <td>81%</td>
    </tr>
    <tr>
      <td>Life Expectancy</td>
      <td>65</td>
    </tr>
  </table>
</div>

<div id="khamDIV" class="boxOne" style="display:none">
  <table id="khamTable" class="table" >
    <tr>
      <td>KHAMMAM</td>
    </tr>
    <tr>
      <td>Population</td>
      <td>3,654,765</td>
    </tr>
    <tr>
      <td>Percent Adults</td>
      <td>81%</td>
    </tr>
    <tr>
      <td>Life Expectancy</td>
      <td>65</td>
    </tr>
  </table>
</div>

Javascript（使用Googlemaps api）

// Add a listener for the click event.
adilabadBorder.addListener('click', showPanelAdila);

//Show table with info
function showPanelAdila() {
  document.getElementByClassName('boxOne').style.display="none";
  document.getElementById('adilaDIV').style.display="block";
  initialize();
}

// Add a listener for the click event.
khammamBorder.addListener('click', showPanelKham);

//Show table with info
function showPanelKham() {
  document.getElementByClassName('boxOne').style.display="none";
  document.getElementById('khamDIV').style.display="block";
  initialize();
}

我要求当用户点击他们的第二个+区时，隐藏旧的分区表并显示新的分区表。

我尝试了其他各种代码，但上面的代码是我最接近的代码：

切换方法未生成浏览器的响应：

function myFunction() {
  var x = document.getElementById('myDIV');
  if (x.style.display === 'none') {
    x.style.display = 'block';
  } else {
    x.style.display = 'none';
  }
}

与jQuery模型解决方案一样：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

在我目前的“解决方案”中，我试图隐藏当用户选择新的区域多边形时我可能正在显示的任何boxOne Div（我有29个区域）。因此，按类别隐藏似乎是正确的方法，但它不起作用。但是 - 如果我只使用getElementById一个区域而不是getElementByClassName，则代码可以正常工作。上表隐藏，新表显示。

Answer 1

问题是getElementsByClassName返回一个集合（getElementById返回一个节点）。所以你必须迭代每个项目并隐藏它。

JQuery通过返回方法$中的jQuery集合来完成此任务。

function hideAll() {
  Array.prototype.forEach.call(document.getElementsByClassName('cls'), function(node) {
    node.style.display = 'none';
  });
}

<div class="cls">class 1</div>
<div class="cls">class 2</div>
<div class="cls">class 3</div>
<div class="cls">class 4</div>
<button onclick="hideAll()">Hide All</button>

Answer 2

我使用类似标签的东西。所以这里的js代码适合你的div。将要显示的divID传递给函数（例如：＆＃34; adilaDIV＆＃34;），其他所有将被隐藏。

function setDivs(divId) {
    var x = document.getElementsByClassName("boxeOne");
    for (i = 0; i < x.length; i++) {
       if (x[i] == divId) {
         x[i].style.display = "block";
       } else {
        x[i].style.display = "none";
       }
    }
}

Answer 3

您的问题是没有功能Machine TF 0 [red, blue] False 1 [red] False 2 [blue] False 3 No Match True（我的代码DataTable targetTable = dtl.Clone(); var dt2Columns = dt.Columns.OfType<DataColumn>().Select(dc => new DataColumn(dc.ColumnName, dc.DataType, dc.Expression, dc.ColumnMapping)); targetTable.Columns.AddRange(dt2Columns.ToArray()); var rowData = from row1 in dtl.AsEnumerable() join row2 in dt.AsEnumerable() on row1.Field<string>("header") equals row2.Field<string>("header") where (row1.Field<string>("digitnumber") != "") select row1.ItemArray.Concat(row2.ItemArray).ToArray(); foreach (object[] values in rowData) targetTable.Rows.Add(values);出现javascript错误）。你想要的函数是DataTable targetTable = dtl.Clone(); var dt2Columns = dt.Columns.OfType<DataColumn>().Select(dc => new DataColumn(dc.ColumnName, dc.DataType, dc.Expression, dc.ColumnMapping)); targetTable.Columns.AddRange(dt2Columns.ToArray()); var rowData = from row1 in dtl.AsEnumerable() join row2 in dt.AsEnumerable() on row1.Field<string>("header") and row1.Field<string>("digitrow") and row1.Field<string> ("response") equals row2.Field<string>("header") and row1.Field<string>("question") and and row1.Field<string> ("answer") where (row1.Field<string>("digitnumber") != "") select row1.ItemArray.Concat(row2.ItemArray).ToArray(); foreach (object[] values in rowData) targetTable.Rows.Add(values);，但顾名思义，它返回一个元素数组，所以你需要迭代该数组来隐藏该类的每个元素，然后你可以显示你的div有兴趣。

getElementByClassName

proof of concept fiddle

代码段

＆＃13;

Uncaught TypeError: document.getElementByClassName is not a function

＆＃13;

getElementsByClassName

＆＃13;

function hideAllBoxOne() {
  var elems = document.getElementsByClassName('boxOne');
  for (i = 0; i < elems.length; i++) {
    elems[i].style.display = "none";
  }
}

//Show table with info
function showPanelAdila() {
  hideAllBoxOne();
  document.getElementById('adilaDIV').style.display = "block";
}


//Show table with info
function showPanelKham() {
  hideAllBoxOne()
  document.getElementById('khamDIV').style.display = "block";
}

＆＃13;

使用display方法将一个HTML表替换为另一个HTML表

3 个答案: