Question

我已经在一个表格中设置了一个div，它将显示一个帮助窗口，我想在tope的右上角设置一个'X'，并有一个onclick功能来关闭窗口。这个div位于我的HTML底部，就在最终正文标记之前，是正确的位置吗？请注意，我想用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;
}

Answer 1

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

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

当然代替hide()你可以处理＆＃34;关闭＆＃34;以某种其他方式。这是关于click()电话。

这是一个正在运行的例子：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

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

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

Answer 3

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Answer 4

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

onclick功能关闭'帮助窗口'不工作

4 个答案: