切换 onClick jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18533141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle onClick jquery
提问by Anusha Honey
I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.
我是网页设计的新手。我有这个示例代码，当我们点击窗口上的任何地方时，它会切换一个 div。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slide demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle"></div>
<script>
$( document ).click(function() {
$( "#toggle" ).toggle( "slide" );
});
</script>
</body>
</html>
How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'
如何添加图像并更改图像以显示和隐藏？我有一个“>”图标。当我点击它时，div 应该出现并且 '>' 应该变成 '<'
采纳答案by nubinub
I think you can do as follow
我认为你可以做如下
<img src='source:<' id='imageid' data-othersource='source:>' />
You can declare an image like that with the two sources and then switch the src in jQuery.
您可以使用两个源声明这样的图像，然后在 jQuery 中切换 src。
//wait for the document to be fully loaded to execute
$(document).ready(function(){
//use event delegation
$(document).on('click','#imageid',function(){
var $this= $(this);
$('#toggle').toggle('slide',function(){
//swap src of the image on toggle is completed
var imgsrc = $this.attr('src');
$this.attr('src',$this.data('othersource'));
$this.data('othersource',imgsrc)
});
});
});
This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.
这样，如果由于某些原因，您必须更改图像，则无需返回脚本，只需更改 html。
Note: event delegation is not necessary in this case, but still i think it's important you read about that partfor furthur use.
注意：在这种情况下不需要事件委托，但我仍然认为您阅读该部分以供进一步使用很重要。
回答by Anton
$('#buttonid').on('click', function () {
$('#toggle').toggle('slide');
});
add a button with an unique id like this
添加一个像这样具有唯一 ID 的按钮
<button id="buttonid">click to toggle </button>
回答by Arun P Johny
instead of registering the click handler to document, register it to a button
而不是将单击处理程序注册到文档，而是将其注册到按钮
if you have a button with id mybuttonthen
如果你有ID的按钮mybutton，然后
//dom ready handler so that the script is executed after the dom is loaded
jQuery(function(){
//register the click handler to an element with id mybutton
$('#mybutton').click(function () {
$("#toggle").toggle("slide");
});
})
Demo: Fiddle
演示：小提琴
回答by Sankalp Mishra
By id:-
通过身：-
<button id="button_id">click to toggle </button>
$('#button_id').click(function() {
$( "#toggle" ).toggle( "slide" );
});
By class:-
按班级：-
<button class="button_class">click to toggle </button>
$('.button_class').click(function() {
$( "#toggle" ).toggle( "slide" );
});
回答by Anil kumar
Try like this
像这样尝试
$('#yourbuttonId').click(function () {
$("#toggle").toggle("slide");
});
