Question

我正在尝试使用单个按钮在可见图像和不可见图像之间切换。我希望第一次单击以使图像出现，第二次再次将其隐藏。我认为使用布尔值将是执行此操作的最佳方法，但我无法完全使其正常工作。

function myStats(){ 
counter = true;
    if(counter == true){	
        document.getElementById('stat').style.display = 'block';
    }
	if(counter == false){
	    document.getElementById('stat').style.display = 'none';
 	}
}

<!DOCTYPE html>
<html>
<head>
<style> 
body{background-color: #A9A9A9;}
</style> 
</head>
<body>
<p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:none;"/></center>
<button onclick="myStats()">Player 1</button>
<h3 id="var"></h3>
</body>
</html>

我意识到这显然是行不通的，因为我没有切换布尔值，但这就是我寻求帮助的地方。

Answer 1

创建一个名为hidden的CSS类，然后使用classList.toggle()。单击按钮时，在图像上切换类。

可以这样做：

document.querySelector('button').addEventListener('click', myStats)

function myStats() {
  document.getElementById('stat').classList.toggle('hidden')
}

.hidden { display: none; }

<center><button>Player 1</button></center>
<center><img id="stat" src="https://via.placeholder.com/150" class="hidden"></center>

Answer 2

我对您的代码段进行了编辑，以在其中放置一个切换开关，并使其生效，因此函数const resDir = "resources/"; const resDirFiles = []; const app = http.createServer((req, res) => { ... fs.readFile(filePath, (err, content) => { if (err) { // To be implemented } else { res.writeHead(200, { "Content-type": contentType }); res.end(content, "utf8", callback(req, res)); } }); }); function callback(req, res) { if (req.url == "/" || req.url == "/index") { fs.readdir(resDir, (err, files) => { files.forEach(file => { resDirFiles.push(file); res.end("<h1>Ok</h1>"); // placeholder }); }); } }不会在每次单击时都设置myStats()。似乎工作正常。我还将计数器变量的声明悬挂在该函数声明的上方，因为应该在其中进行切换，并以counter = true表示。

counter = !counter

let counter = true;
function myStats(){ 
counter = !counter;

    if(counter == true){	
        document.getElementById('stat').style.display = 'block';
    }
	if(counter == false){
	    document.getElementById('stat').style.display = 'none';
 	}
}

Answer 3

布尔变量应位于函数之外，因此不会在每次调用函数时重置其值。同样，您应该将此布尔变量值从true切换为false，反之亦然。看看我的解决方案。希望这会有所帮助！

var isImageShouldBeVisible = true;

function toggleImageVisibility() {
  isImageShouldBeVisible = !isImageShouldBeVisible;
  
  if (isImageShouldBeVisible) {	 
    document.getElementById('stat').style.display = 'block';
  } else {
    document.getElementById('stat').style.display = 'none';
  }
}

<!DOCTYPE html>
<html>
<head>
<style> 
body{background-color: #A9A9A9;}
</style> 
</head>
<body>
<p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:block;"/></center>
<button onclick="toggleImageVisibility()">Player 1</button>
<h3 id="var"></h3>
</body>
</html>

Answer 4

这是因为counter在整个代码中保持不变。您需要在函数末尾添加counter = !counter。
我会使用三元运算符来实现。仅需要检查Boolean

，就需要style.display

let elm = document.getElementById('stat');
function myStats(){ 
  let {display} = elm.style;
  elm.style.display = display === 'none' ? 'block' : 'none';
}

body{background-color: #A9A9A9;}

<p> Dallas Fuel </p>

<center><img id="stat" src="Images/buttonLA.png" style="display:none;"/></center>
<button onclick="myStats()">Player 1</button>
<h3 id="var"></h3>

如何使用布尔值来切换图像可见性？

4 个答案: