How do I add a value to a click
I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like
<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});
So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .
Thanks!
javascript jquery
add a comment |
I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like
<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});
So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .
Thanks!
javascript jquery
$(this).next('img').attr('src')
– Roy
Apr 13 '18 at 8:59
add a comment |
I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like
<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});
So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .
Thanks!
javascript jquery
I'd like to add an attribute/value to each click of similar elements to use that value somewhere else. The code I'd like to use it is something like
<div class="productbox"><img src="image.png"></div>
<div class="productbox"><img src="image2.png"></div>
<div class="productbox"><img src="image3.png"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).next(img).value;
$(".differentcontainer").html(imgname);
});
So I'd want to get the value of the comoplete img-tag and use it after a click on a different element. As I already use jquery this would possibly make most sense sticking to it .
Thanks!
javascript jquery
javascript jquery
asked Apr 13 '18 at 8:54
DaiaiaiDaiaiai
470417
470417
$(this).next('img').attr('src')
– Roy
Apr 13 '18 at 8:59
add a comment |
$(this).next('img').attr('src')
– Roy
Apr 13 '18 at 8:59
$(this).next('img').attr('src')
– Roy
Apr 13 '18 at 8:59
$(this).next('img').attr('src')
– Roy
Apr 13 '18 at 8:59
add a comment |
2 Answers
2
active
oldest
votes
From jQuery Syntax
The
jQuery syntax
is tailor-made for selectingHTML
elements and
performing some action on the element(s). Basic syntax is:
$(selector).action();
A
$
sign to define/access jQuery.
A
(selector)
to "query (or find)" HTML elements.
A jQuery
action()
to be performed on the element(s)
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
$(this)
says that the click which is performed on.productbox
. So all the content inside the clicked element will be taken
– Sinto
Apr 13 '18 at 9:06
add a comment |
Juts get the html in the div, something like this:
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
No need for$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49812973%2fhow-do-i-add-a-value-to-a-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
From jQuery Syntax
The
jQuery syntax
is tailor-made for selectingHTML
elements and
performing some action on the element(s). Basic syntax is:
$(selector).action();
A
$
sign to define/access jQuery.
A
(selector)
to "query (or find)" HTML elements.
A jQuery
action()
to be performed on the element(s)
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
$(this)
says that the click which is performed on.productbox
. So all the content inside the clicked element will be taken
– Sinto
Apr 13 '18 at 9:06
add a comment |
From jQuery Syntax
The
jQuery syntax
is tailor-made for selectingHTML
elements and
performing some action on the element(s). Basic syntax is:
$(selector).action();
A
$
sign to define/access jQuery.
A
(selector)
to "query (or find)" HTML elements.
A jQuery
action()
to be performed on the element(s)
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
$(this)
says that the click which is performed on.productbox
. So all the content inside the clicked element will be taken
– Sinto
Apr 13 '18 at 9:06
add a comment |
From jQuery Syntax
The
jQuery syntax
is tailor-made for selectingHTML
elements and
performing some action on the element(s). Basic syntax is:
$(selector).action();
A
$
sign to define/access jQuery.
A
(selector)
to "query (or find)" HTML elements.
A jQuery
action()
to be performed on the element(s)
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
From jQuery Syntax
The
jQuery syntax
is tailor-made for selectingHTML
elements and
performing some action on the element(s). Basic syntax is:
$(selector).action();
A
$
sign to define/access jQuery.
A
(selector)
to "query (or find)" HTML elements.
A jQuery
action()
to be performed on the element(s)
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img style="width:50px; height:50px" src="https://i2.wp.com/mightywidow.com/wp-content/uploads/2016/12/11519100485_ddfd5be329_z.jpg?fit=640%2C361&ssl=1" title="1"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnXSQpzvR2frx8nzq-rxxQZsOjPtRWNVVRwoU7-NsUAtGYUOom" title="2"></div>
<div class="productbox"><img style="width:50px; height:50px" src="https://s-media-cache-ak0.pinimg.com/736x/e6/63/d0/e663d0bf3d57da87ef9992cddd5af05c--kindness-ideas-acts-of-kindness.jpg" title="3"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
edited Nov 25 '18 at 11:11
Yvette Colomb♦
20.3k1470112
20.3k1470112
answered Apr 13 '18 at 9:02
SintoSinto
3,26792340
3,26792340
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
$(this)
says that the click which is performed on.productbox
. So all the content inside the clicked element will be taken
– Sinto
Apr 13 '18 at 9:06
add a comment |
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
$(this)
says that the click which is performed on.productbox
. So all the content inside the clicked element will be taken
– Sinto
Apr 13 '18 at 9:06
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
Thanks! So var imgname = $(this).html(); does use all the content of the clicked parent-element but not the parent element itself? SO in terms of a more complicated markup-structure I'd need to specify the "this" better?
– Daiaiai
Apr 13 '18 at 9:04
$(this)
says that the click which is performed on .productbox
. So all the content inside the clicked element will be taken– Sinto
Apr 13 '18 at 9:06
$(this)
says that the click which is performed on .productbox
. So all the content inside the clicked element will be taken– Sinto
Apr 13 '18 at 9:06
add a comment |
Juts get the html in the div, something like this:
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
No need for$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
add a comment |
Juts get the html in the div, something like this:
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
No need for$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
add a comment |
Juts get the html in the div, something like this:
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
Juts get the html in the div, something like this:
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
$(".productbox").click(function() {
var imgname = $(this).html();
$(".differentcontainer").empty();
$(".differentcontainer").html(imgname);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productbox"><img src="http://via.placeholder.com/350x150"></div>
<div class="productbox"><img src="http://via.placeholder.com/140x100"></div>
<div class="productbox"><img src="http://via.placeholder.com/200x100"></div>
<div class="differentcontainer">
<!-- the value of the image shall be put in here as <img src="..."> -->
</div>
answered Apr 13 '18 at 9:00
Sachi TekinaSachi Tekina
1,19731538
1,19731538
No need for$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
add a comment |
No need for$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
No need for
$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
No need for
$(".differentcontainer").empty();
– Carsten Løvbo Andersen
Apr 13 '18 at 9:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f49812973%2fhow-do-i-add-a-value-to-a-click%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
$(this).next('img').attr('src')
– Roy
Apr 13 '18 at 8:59