I have function
$('body').on('click', '.urlsend', function ()
{
console.log("this.parameter");
}
and all elements with ".urlsend" have some parameter, which I need to pass to the function.
HTML looks like this:
<div id="canvas">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function loadImgs(){
<!--somecode-->
function gotData(arr){
var element="";
for(var i = 0;i<arr.data.length;i++)
{
var img = arr.data[i].images.original.url;
element += '<img src="'+img+'" class="urlsend" data-url="'+img+'">';
}
$('#canvas').html(element);
}
}
</script>
You can use .attr to get parameter or attribute of an HTML element.
$(document).ready(function() {
$('body').on('click', '.urlsend', function() {
console.log($(this).attr("parameter"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="urlsend" parameter="1"> urlsend DIV 1</div>
<div class="urlsend" parameter="2"> urlsend DIV 2</div>
<div class="urlsend" parameter="3"> urlsend DIV 3</div>
<div class="urlsend" parameter="4"> urlsend DIV 4</div>
Doc: http://api.jquery.com/attr/
this within the callback will be the specific .urlsend element that the event relates to, so you can access the information from this.
For instance, if the "parameter" is a data-info attribute:
console.log(this.getAttribute("data-info"));
or with more jQuery:
console.log($(this).attr("data-info"));
(Don't use .data(...) unless you want the features it provides, see this answer for details.)
try this
<script>
$(function(){
$('body').on('click' , ' .urlsend' , function(){
var url=$(this).data('url');
var user=$(this).data('user');
alert(url);
alert(user);
});
});
</script>
<body>
<button class="urlsend" data-url="google.com" data-user="kate">click</button>
</body>
hope this help you
Related
I have 3 divs that fades sequentially on page load just like on this link:
http://jsfiddle.net/x4qjscgv/6/ However, I want the fade function to happen once the user clicked a button. I tried to use the function: document.getElementById but it does not appear to be working.
See full code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
document.getElementById('btn').onclick = function(e)
</script>
<style>
#chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button>
<div id="chat" class="word1">Word 1</div>
<div id="chat" class="word2">Word 2</div>
<div id="chat" class="word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
</html>
You can follow my example. But note, id is only one instance, and class can has many instances!
$(document).ready(function() {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btn").on('click', function(e){
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
$("#btnhide").on('click', function(e){
$('.chat').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
.chat {
display: none;
}
</style>
</head>
<body>
<button id="btn"> fade divs </button> <button id="btnhide"> hide divs</button>
<div class="chat word1">Word 1</div>
<div class="chat word2">Word 2</div>
<div class="chat word3">Word 3</div>
<div id="" class="">Word 4</div>
</body>
This line does select #btn, however it does not execute anything because the function declaration is incomplete:
document.getElementById('btn').onclick = function(e)
You must include the actions of the function like so:
document.getElementById('btn').onclick = function(e){
// add function within curly braces.
}
It's worth noting that the e is the Event object. Try adding console.log('test') and check the console (often accessed via right-click > "Inspect") for your messages.
The onclick function that you used indeed doesn't do anything, because you didn't wrapped your'e fade-in code by it. If you already using jquery, try using the click event handler, like so:
$(document).ready(function() {
$('#btn').click( function () {
$('.word1, .word2, .word3').each(function(fadeIn) {
$(this).delay(fadeIn * 500).fadeIn(1000);
});
});
});
Modify your example:
<div id="chat1" class="word">Word 1</div>
<div id="chat2" class="word">Word 2</div>
<div id="chat3" class="word">Word 3</div>
.word {
display: none;
}
$(".word").click(function(e){
$(this).delay(10).fadeOut(1000);
});
<div id="noty">Hello</div>
<div id="noty">World</div>
<div id="noty">Nation</div>
<div id="textArea"></div>
$("#noty").click(function() {
$("#textArea").html($("#noty").html());
});
I'm using this to copy text from one div to other by onclick function. But this is not working. It's only working on the first div. Is there any way to accomplish this ?
Use something like this:
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>
<div id="textArea"></div>
<script>
$(".noty").click(function() {
$("#textArea").html($(this).html());
});
</script>
https://jsbin.com/giqilicesa/edit?html,js,output
Like this.
$(".noty").click(function(e) {
$("#textArea").html(e.target.innerHTML);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>
<div id="textArea"></div>
Yes. var s = ''; $('.noty').each(function () {s += $(this).html();}); $('#textarea').html(s); but change your divs to use class="noty" instead of id. The id should be unique.
At first, you must not use multiple id attribute. And another problem is sizzle providing jQuery as a selector engine returns result to use getElementById. It means even if you've declared multiple ids, you'll get just only one id element. When consider those problems, you can get over this problem to follow this way:
<div class="noty">Hello</div>
<div class="noty">World</div>
<div class="noty">Nation</div>
<div id="textArea"></div>
<script>
var $noty = $('.noty');
var $textarea = $('#textArea');
$noty.click(function () {
var text = Array.prototype.map.call($noty, function (el) {
return $(el).html();
}).join(' ');
$textarea.html(text);
});
</script>
I have a menu where I'd like to retrieve the text within the div so I tried writing something like this
$(".link").click(function() {
var linkValue = $(".link").text();
alert(linkValue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<div class="link">Home</div>
<div class="link">Apartment</div>
<div class="link">Contact</div>
<div class="link">About us</div>
</div>
But it takes all the values of each class. Is it possible to make it take only the div's text I clicked?
Use this inside the click function:
$(".link").click(function(){
var linkValue = $(this).text();
alert(linkValue);
});
I want to access different id's (with same name) using $this in jquery, but its not working.
I want when a superhero is clicked only his friend and he himself change their class only.
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
$('.shikhar').click(function(){
$(this).find('#a').click(function(){
$(this).find('#b').addClass("selected");
$(this).find('#a').addClass("highlight");
});
$(this).find('#b').click(function(){
$(this).find('#a').addClass("selected");
$(this).find('#b').addClass("highlight");
});
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div class="shikhar">
<div id="a">Spiderman</div>
<div id="b">Hulk</div>
</div>
<div class="shikhar">
<div id="a">Superman</div>
<div id="b">Batman</div>
</div>
</body>
</html>
ID attributes must be unique. JavaScript stops searching as soon as it finds the first element with a matching ID. Simply change those IDs into classes instead:
<div class="a">Spiderman</div>
...
<div class="a">Superman</div>
Then change your jQuery selectors to $('.a') and $('.b') instead:
$(this).find('.a').click(function(){
$(this).find('.b').addClass("selected");
$(this).find('.a').addClass("highlight");
});
You have duplicate ids. IDs should be unique. You can use the markup:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
And JS:
$('.shikhar').click(function(){
$(this).find('.a').click(function(){
$(this).next().addClass("selected");
$(this).addClass("highlight");
});
$(this).find('.b').click(function(){
$(this).prev().addClass("selected");
$(this).addClass("highlight");
});
});
you cant use the same ID for different elements. use ID for only one element.
HTML:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
jQuery:
$('.shikhar').each(function(){
$(this).on('click','.a, .b',function(){
$(this).closest('.shikhar').children().removeClass('selected highlight');
$(this).addClass('selected');
$(this).siblings().addClass('highlight');
});
});
Fiddle:
http://jsfiddle.net/me2DE/
Try this:
$(document).ready(function() {
$('.shikhar >').click(function(){
$(this).addClass("highlight");
$(this).siblings('div').addClass("selected");
});
});
Here is your answer: http://jsfiddle.net/S5rbz/ But it's wrong to have more items with the same id value on the same page. So replace the id's with class values.Later edit: also, I think you want to remove the existing class, for each children, and add the new class, as if you keep adding the classes, they will be overwritten by the last named class(also keep in mind the cascading rule declarations).
I have the following HTML code:
<div class="container">
<div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
<div class="container">
<div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
.
.
.
<div class="container">
<div><div>...</div><a class="child" href="#">Example</a></div>..</div></div>
</div>
And I have the following JavaScript script:
$('a.child').prependTo('div.container');
But this code, instead of making each a element prepended to their own container, makes all a elements prepended to each of the containers.
How can I fix this?
Thanks!
Iterate over each a.child, and prepend it.
$('a.child').each(function ()
{
var $this = $(this);
$this.prependTo($this.closest('div.container'));
});
http://jsfiddle.net/mattball/tRNUS
You can try the each method:
$('a.child').each(function(){
$(this).prependTo($(this).closest('.container'));
})
Fiddle
div.container and a.child are acting as separate selectors. They aren't related.
You would have to loop over the a.child elements and select the parent element:
$('a.child').each(function() {
var $this = $(this);
$this.parents('div.container').prepend($this);
});