jQuery: How to make new "button" to run this function
I want to make a new span class called "button". When the "button" is clicked, it should run jQuery and flip .front not the "button". I tried: $('.button').bind("click",function() { but it only effects the button, not the .front.
HTML:
<span class="button">Run!</span>
jQuery:
$(document).ready(function(){
$('.front').bind("click",function() {
// $(this) point to the clicked .front element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction:'tb',
speed: 350,
onBefore: fu开发者_运维知识库nction(){
// Insert the contents of the .back div (hidden from view with display:none)
// into the clicked .front div before the flipping animation starts:
elem.html(elem.siblings('.back').html());
}
});
// Setting the flag:
elem.data('flipped',true);
}
});
});
You need to attach the event to button, then address the element you wish to manipulate in your function, e.g.
$(".button").click(function(){
var elem = $('.front');
…
UPDATE: Example of complete page (obviously you would likely put .js and .css in external files, this is just a demo), does this do what you want? If not, why/how not :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<script src="jquery.flip.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".button").live('click', function() {
// $(this) point to the clicked .front element (caching it in elem for speed):
var elem = $('.front');
console.log(elem.data('flipped'));
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
}
else
{
// Using the flip method defined by the plugin:
elem.flip({
direction: 'tb',
speed: 350,
onBefore: function() {
// Insert the contents of the .back div (hidden from view with display:none)
// into the clicked .front div before the flipping animation starts:
elem.html(elem.siblings('.back').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
</script>
<style type="text/css" media="screen">
.front
{
width: 400px;
height: 300px;
background-color: red;
}
.back
{
display: none;
}
.button
{
display: block;
border: 1px solid black;
width: 50px;
}
</style>
</head>
<body>
<div class="front">
<span class="button">Run!</span>
<p>
Hello World!
</p>
</div>
<div class="back">
<span class="button">Run!</span>
<p>
I am back
</p>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论