jQuery make it possible to interact with user by adding events to the web page, It includes many Events Methods like hide(), bind(), blur(), change(), click() and dbclick(). Here in this blog I just want to create one "click" function that includes all the events on a single click. If user wants to add many events to different divs on single click so they can use "On" method that includes all the events into a single function, here I used "data-content" property also that will store the different values of the div into one variable named "data", then I used "if" condition for executing the different values of data-content the condition is checked into the if statement and then the every condition will be executed one by one.
This is the simple code that will help you to understand better.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").on("click", ".common", function(){
var data = $(this).attr("data-content");
console.log(data);
if (data=="one") {
$("#one").hide();
}
if (data=="two"){
$("#two").animate({left: '250px'});
}
if (data=="three" ){
$("#three").slideToggle();
}
if (data=="fourth"){
$("#fourth").fadeOut();
}
});
});
</script>
<style>
.common{border:1px solid #000; background-color: green; color: #fff; padding: 10px 30px; cursor: pointer; width: 300px}
</style>
</head>
<body>
<div class="common" id="one" data-content="one">Click This paragraph.</div>
<div class="common" id="two" style="background:#98bf21;position:absolute; top:131px;" data-content="two">Click last paragraph to animate it.</div>
<div class="common" id="three" data-content="three">Click to slide toggle this paragraph.</div>
<div class="common" id="fourth" data-content="fourth">Click to fade out paragraph.</div>
</body>
</html>
Output:- For getting output you can download the below link.
0 Comment(s)