onclick 关闭“帮助窗口”的功能不起作用答案

【问题标题】：onclick Function to close 'help window' not workingonclick 关闭“帮助窗口”的功能不起作用
【发布时间】：2018-03-16 22:45:29
【问题描述】：

我已经在一个表单中设置了一个 div，它将显示一个帮助窗口，我想在右上角设置一个“X”，并使用 onclick 功能关闭窗口。这个 div 位于我的 HTML 的底部，就在 end body 标记之前，这是正确的位置吗？请注意，我想用 display:none 标签来做这个，而不是 show() 或 hide() HTML

<div id="personalhelp"><p class="x"><a href="" onclick="close()">x</a></p>
<p class="help">Your personal information is needed to ensure we provide the most 
relevant information and options for you. We will never sell your personal
 information to third parties for any reason.</p>
<p class="help">Please fill in all required fields, 
these are identified with an asterisk (*)</p>
</div>

函数（jQuery）

function close() {
    var getid = $(this).parent.attr('id');
   console.log(getid);
   $(getid).css("display", "none");
}

CSS

#personalhelp {
    position: fixed;
    right: 10%;
    top: 10%;
    max-width: 60%;
    display: block;
    background-color: #D3D3D3;
    color: #000;
    margin: 5px auto;
    border: 2px solid #000;
    display: block;
}

.x {
    position: absolute;
    right: 1%;
    top:1%;
    padding: 1px;
    margin: 0 auto;
}
.help {
    padding: 10px;
}

【问题讨论】：

正如我在下面的回答中提到的，将回调名称从close 更改为其他，因为有浏览器原生函数close

标签： javascript jquery html css

【解决方案1】：

您的close() 方法不知道this 是什么。 jQuery 有它自己的click() 函数，你应该使用它并避免在你的HTML 中使用onclick="..."。只需这样做：

$( ".x" ).click(function() {
    $(this).parent().hide();
});

当然，您可以用其他方式处理“关闭”而不是hide()。这是关于click() 的电话。

这是一个运行示例：

$(".x").click(function() {
  $(this).parent().hide();
});

#personalhelp {
  position: fixed;
  right: 10%;
  top: 10%;
  max-width: 60%;
  display: block;
  background-color: #D3D3D3;
  color: #000;
  margin: 5px auto;
  border: 2px solid #000;
  display: block;
}

.x {
  position: absolute;
  right: 1%;
  top: 1%;
  padding: 1px;
  margin: 0 auto;
}

.help {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="personalhelp">
  <p class="x"><a href="" onclick="close()">x</a></p>
  <p class="help">Your personal information is needed to ensure we provide the most relevant information and options for you. We will never sell your personal information to third parties for any reason.</p>
  <p class="help">Please fill in all required fields, these are identified with an asterisk (*)</p>
</div>

【讨论】：

使用 hide() 和 css("display", "none") 将其隐藏半秒钟然后再次显示。那里可能出了什么问题？
不要同时使用。 hide() 将为您设置 css。这就是它的作用:) 完全放弃你的close() 方法。
哦，不，我没有同时使用。我都试过了，看看有没有区别。我已经复制并粘贴了您所拥有的内容，但是单击 x 时它不会保持隐藏状态
我添加了一个完整的运行示例。只是看看和尝试。我希望这会有所帮助！
终于找出了导致问题的原因...我有另一个用于 p#group 的 css，其中有 display:block 并且由于某种原因它影响了它并使其在函数运行后显示.您的回答是所有回答中最干净的。谢谢！

【解决方案2】：

分区标签始终需要位于<body>... </body> 部分。

您只需要像这样更改脚本代码document.getElementById(mydiv).style.display="none"; 或者基本上

$('#mydiv' ).hide();

这意味着在 css 中显示属性设置为无。也许您尝试在脚本函数中编写 onclick 事件...

【讨论】：

【解决方案3】：

问题在于您的函数close。还有其他具有该名称的浏览器本机函数被调用。当更改为其他名称时，它可以工作。也应该是var getid = $(this).parent().attr('id');。

function closePersonalHelp() {
   var getid = $(this).parent().attr('id');
   console.log(getid);
   // line below is roughly equivalent to $(getid).hide();
   $(getid).css("display", "none");
}

#personalhelp {
    position: fixed;
    right: 10%;
    top: 10%;
    max-width: 60%;
    display: block;
    background-color: #D3D3D3;
    color: #000;
    margin: 5px auto;
    border: 2px solid #000;
    display: block;
}

.x {
    position: absolute;
    right: 1%;
    top:1%;
    padding: 1px;
    margin: 0 auto;
}
.help {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="personalhelp"><p class="x"><a href="" onclick="closePersonalHelp()">x</a></p>
<p class="help">Your personal information is needed to ensure we provide the most 
relevant information and options for you. We will never sell your personal
 information to third parties for any reason.</p>
<p class="help">Please fill in all required fields, 
these are identified with an asterisk (*)</p>
</div>

【讨论】：

感谢您发布了一个运行示例。但我认为如果她使用 jQuery，她不应该通过onclick="..." 处理点击。

【解决方案4】：

$(document).ready(function(){
$("#personalhelp").click(function(){
$(".help,div").css("display","none");
})
});

#personalhelp {
    position: fixed;
    right: 10%;
    top: 10%;
    max-width: 60%;
    display: block;
    background-color: #D3D3D3;
    color: #000;
    margin: 5px auto;
    border: 2px solid #000;
    display: block;
}

.x {
    position: absolute;
    right: 1%;
    top:1%;
    padding: 1px;
    margin: 0 auto;
}
.help {
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="personalhelp"><p class="x"><a href="">x</a></p>
<p class="help">Your personal information is needed to ensure we provide the most 
relevant information and options for you. We will never sell your personal
 information to third parties for any reason.</p>
<p class="help">Please fill in all required fields, 
these are identified with an asterisk (*)</p>
</div>

【讨论】：