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功能關閉'幫助窗口'不工作

回答

相關問題