[英]jquery code to Show/Hide image by clicking on same <div>
I want to Show/Hide image by jQuery
by clicking on same <div>.
我想通过显示/隐藏图像
jQuery
点击相同<div>.
I can't swap the image with toggle function. 我不能用切换功能交换图像。 I am using it with HTML.
我正在使用HTML。 this is not working
这不起作用
<script type="text/javascript">
$(document).ready(function () {
$("cell").click(function () {
$('#img1').toggle("slow");
})
});
</script>
<div id="gridbox">
<div class="cell">
<div class="inner">
<span class="name">Bob</span> <br /> (id: 57)
<%-- <input type="hidden" class="friend_id" value="57 " />--%>
<img src="Images/mobile.jpg" alt="" id="img1" width="180" height="180"/>
</div>
</div>
$('#divId').click(function(){
$('#imgId').toggle();
});
在第一行使用.cell而不是cell
you can use the jquery toogle
api 你可以使用jquery
toogle
api
html HTML
<div id="clickhere ">
Click here
</div>
<img id="image" src="demo.png" alt="" width="120" height="120" />
jquery jQuery的
$('#clickhere ').click(function() {
$('#image').toggle('slow', function() {
// Animation complete.
});
});
for further reference check this link of jquery .toggle() 进一步参考检查此链接的jquery .toggle()
If by using it with HTML you mean to say you are writing script inline then stop. 如果将它与HTML一起使用,则意味着您要编写脚本内联然后停止。 This has so many negatives and I won't list them all to save time.
这有很多负面因素,我不会将它们全部列出以节省时间。
Abstract the javascript to a separate file and only use inline to initialise the script. 将javascript抽象为单独的文件,仅使用内联来初始化脚本。 Here's an example of abstracting scripts with classes (uses mootools) http://digitarald.de/project/autocompleter/
这是一个用类抽象脚本的例子(使用mootools) http://digitarald.de/project/autocompleter/
Here's the example you should be following: http://jqueryui.com/demos/toggle/ 以下是您应该遵循的示例: http : //jqueryui.com/demos/toggle/
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// get effect type from
var selectedEffect = $( "#effectTypes" ).val();
// most effect types need no options passed by default
var options = {};
// some effects have required parameters
if ( selectedEffect === "scale" ) {
options = { percent: 0 };
} else if ( selectedEffect === "size" ) {
options = { to: { width: 200, height: 60 } };
}
// run the effect
$( "#effect" ).toggle( selectedEffect, options, 500 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
<div class="demo">
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Toggle</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
<select name="effects" id="effectTypes">
<option value="blind">Blind</option>
<option value="bounce">Bounce</option>
<option value="clip">Clip</option>
<option value="drop">Drop</option>
<option value="explode">Explode</option>
<option value="fold">Fold</option>
<option value="highlight">Highlight</option>
<option value="puff">Puff</option>
<option value="pulsate">Pulsate</option>
<option value="scale">Scale</option>
<option value="shake">Shake</option>
<option value="size">Size</option>
<option value="slide">Slide</option>
</select>
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.