尝试使用JS动态显示样式表中隐藏的元素

时间:2018-05-01 15:22:15

标签: javascript css

我在JS中写了一个卡片游戏,它使用onclick事件来决定谁先走。我试图让所有其他元素(包含在2个div中)隐藏起来,直到发生这种情况。

我已尝试在CSS中将这些div设置为display:none,然后在Javascript中使用x.style.display = 'block'使其可见:



let firstGoChosen = 0;

function hideShow() {
  let div1 = document.getElementById('divvy1');
  let div2 = document.getElementById('divvy2');
  if (firstGoChosen === 1) {
    div1.style.display = 'block';
    div2.style.display = 'block';
  }
}




onclick事件调用的函数设置firstGoChosen = 1

我也尝试使用visibility:hidden,但到目前为止都没有。

我之前只使用纯JS,因为我还没有学习jQuery。 Here's the JSfiddle让任何感到勇敢的人......

3 个答案:

答案 0 :(得分:0)

您正在尝试使用css类名作为ID,这是什么不起作用。您可以通过添加ID

来解决此问题

[{ "Name": "Xylem Zelienople", "Latitude": 40.7934399, "Longitude": -80.1314, "Country": "United States", "AddressLine": "227 South Division Street ", "CityStateAndZip": "Zelienople, PA 16063" }, { "Name": "Xylem Boise", "Latitude": 43.57857, "Longitude": -116.283069, "Country": "United States", "AddressLine": "2707 Saturn Way", "CityStateAndZip": "Boise ID" }, { "Name": "Xylem Analytics San Diego", "Latitude": 32.895888, "Longitude": -117.17336, "Country": "United States", "AddressLine": "9940 Summers Ridge Road", "CityStateAndZip": "San Diego, CA 92121-3091" }, { "Name": "Xylem Analytics Raleigh", "Latitude": 35.8966417, "Longitude": -78.6520511, "Country": "United States", "AddressLine": "8601 Six Forks Road, Suite 700", "CityStateAndZip": "Raleigh, NC 27615" }, { "Name": "Xylem Analytics Middletown", "Latitude": 41.592587, "Longitude": -72.7235357, "Country": "United States", "AddressLine": "56 Bradley Street", "CityStateAndZip": "Middletown, CT 06457" }, { "Name": "Xylem Analytics College Station", "Latitude": 30.564357, "Longitude": -96.3024292, "Country": "United States", "AddressLine": "151 Graham Road", "CityStateAndZip": "College Station, TX 77845" }, { "Name": "Principle Environmental, Inc", "Latitude": 33.909104, "Longitude": -84.480187, "Country": "United States", "AddressLine": "1770 The Exchange, Suite 210", "CityStateAndZip": "Atlanta, GA 30339" }, { "Latitude": 30.516342, "Longitude": -90.111274, "Country": "United States", "AddressLine": "17961 Painters Row", "CityStateAndZip": "Covington, LA 70435" }]

并继续使用<div class="divvy1" id="divvy1">,或者您可以考虑使用getElementsByClassName(),其功能稍有不同,但看起来更像是您要完成的任务。

答案 1 :(得分:0)

要获得预期的结果,请使用getElementsByClassName,因为您正在使用类并尝试使用document.getElementById

document.getElementsByClassName返回具有匹配类名的元素数组,即divvy1和divvy2,因为有一个元素首先按[0]

选择
let div1 = document.getElementsByClassName('divvy1')[0];
let div2 = document.getElementsByClassName('divvy2')[0];

https://codepen.io/nagasai/pen/MGpNoR

选项2是将类更改为ID并使用相同的javascript代码进行工作

答案 2 :(得分:0)

我很确定你可以通过以下方式轻松完成:

gdal_retile.py -overlap 67 -targetDir <yourTileDirectory> <your1000x1000inputfile>