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

我已经设置了一个div窗体，它将显示一个帮助窗口，并且想要在onclick函数的右上角设置一个'X'关闭窗户。这个div位于我的HTML底部，就在end body标签之前，是正确的位置吗？请注意，我想与显示器做到这一点：无标签，不显示（）或隐藏（） HTMLonclick功能关闭'帮助窗口'不工作

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

来源

2017-10-05 Sarah

正如我在我的回答如下，更改回调提到名字从'close'某事物等，因为有浏览器的本地函数'close' –

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

来源

2017-10-05 10:40:13 mumpitz

使用hide（）和css（“display”，“none”）它隐藏了半秒钟，然后再次显示。那里可能会出现什么问题？ – Sarah

不要同时使用两者。 'hide（）'会为你设置CSS。这就是它所做的:)完全放弃你的close（）方法。 – mumpitz

哦不，我没有使用两个。我试图看看是否有区别。我已经复制并粘贴了你所拥有的内容，但是当点击x时，它不会保持隐藏状态 – Sarah

分工标签总是需要位于<body>... </body>部分。

你只需要改变这样document.getElementById(mydiv).style.display="none"; 或基本

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

这意味着在设置为none CSS显示属性脚本代码。也许你尝试编写脚本函数中的onclick事件...

来源

2017-10-05 10:44:44

问题出在你的函数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>

来源

2017-10-05 10:45:21

我很感激你发布了一个运行的例子。但我想如果她使用jQuery，她不应该通过'onclick =“...”'来处理点击。 – mumpitz

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

来源

2017-10-05 11:29:35

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

回答

相关问题