Question

这是我的Javascript code：

function expand(element) {
    let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "block";
    viewbox.innerHTML = "<h2 id='close' onclick='close()'>Х</h2><img id='inner_image' src='" + element.firstChild.src + "'>";   
}

function close() {
    let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "none";
}

当我尝试触发关闭事件时，ID为viewbox的 div 应该会消失，但没有任何反应。我做错了什么？

这里是使用expand()函数的代码

<div class="conatiner" onclick="expand(this)"><img class="image" width="650" src="images/pizza1.jpg" alt="pizza"></div>

这里是应该使用close()函数的代码

<div id="viewbox" style="display: block;"><h2 id="close" onclick="close()">Х</h2><img id="inner_image" src="http://pizza-funpage.ua/images/pizza1.jpg"></div>

Answer 1

由于您使用的是onclick属性，因此浏览器会在a long chain of objects上寻找名为close的内容。

因此，您要调用document.close而不是您定义的全局close变量。

避免这种情况的快速入侵是使用其他名称。

更安全的选择是避免使用onclick属性并使用JavaScript切换到绑定事件处理程序。

document.querySelector("#viewport h2").addEventListener("click", close);

（旁白：关闭按钮不是标题。编写语义标记。如果有，请使用<button>而不是<h2>在概念上，按钮）。

Answer 2

您可以单独创建h2元素，将事件侦听器附加到它，然后注入元素。

以下是您的功能的样子：

function expand(element) {
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = "block";
  const h2 = document.createElement('h2');
  h2.id = 'close';
  h2.addEventListener('click', close);
  h2.innerText = 'X';
  viewbox.innerHTML = '';
  viewbox.appendChild(h2);
}

function close() {
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = "none";
}

document.querySelector('button').addEventListener('click', (e) => {
  expand(e);
})

<div id="viewbox"></div>
<button>Click</button>

Answer 3

您确定要通过单击视图框本身关闭视图框吗？下面的代码应该做你想要的;但是，如果您需要切换按钮，则只需在展开功能中使用if语句，即可在每次单击时切换视图框可见性。

function expand(){
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = 'block';
}

function contract(){
  let viewbox = document.getElementById('viewbox');
  viewbox.style.display = 'none';
}

*{
  box-sizing: border-box;
}

.container{
  padding: 50px;
  background-color: #efefef;
  
  width: 50%;
  
  text-align: center;
  font-size: 24px;
}

.container-expand{
  width: 50%;
  padding: 15px;
}

#viewbox{
  display: none;
  
  background-color: #fdfdfd;
}

<div class="container" onClick="expand()">Click To Expand</div>
<div id="viewbox" class="container-expand" onClick="contract()">I'm a view box with content. Click me to close.</div>

以下是如何仅使用顶部按钮切换视口框可见性的示例。

function toggleExpand(){
  let viewbox = document.getElementById('viewbox');
  if(viewbox.style.display === 'none'){
    viewbox.style.display = 'block';
  }
  else{
    viewbox.style.display = 'none';
  }
}

*{
  box-sizing: border-box;
}

.container{
  padding: 50px;
  background-color: #efefef;
  
  width: 50%;
  
  text-align: center;
  font-size: 24px;
}

.container-expand{
  width: 50%;
  padding: 15px;
}

#viewbox{
  display: none;
  
  background-color: #fdfdfd;
}

<div class="container" onClick="toggleExpand()">Toggle Expand</div>
<div id="viewbox" class="container-expand">I'm a view box with content. Click the toggle button again to close.</div>

Answer 4

<div class="conatiner" onclick=expand(this)><img class="image" width="650" src="images/pizza1.jpg" alt="pizza"></div>
<div id="viewbox" style="display: block;"><h2 id="close" >Х</h2>
<img id="inner_image" src="http://pizza-funpage.ua/images/pizza1.jpg"></div>

我已经使用jquery实现了你的close函数。希望您也可以通过jquery实现扩展功能。

function expand(element) {
    let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "block";
    viewbox.innerHTML = "<h2 id='close' onclick='close()'>Х</h2><img id='inner_image' src='" + element.firstChild.src + "'>";   
}


$(document).ready(function(){

$(document).on('click','#close',function(){

  let viewbox = document.getElementById('viewbox');
    viewbox.style.display = "none";
})
})

使用Jquery 2.2.4版本。

onclick处理程序

4 个答案: