How do I add a value to a click - javascript

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!

From jQuery Syntax
The jQuery syntax is tailor-made for selecting HTML 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>

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>

Related

Apply change to all parent elements that contains a certain child element using jQuery

I'm trying to do the same thing as this question but my parent element does not have an id. It does have a class through. Basically I have multiple elements of the same class and some have a child element. If a member of the class example contains the child, apply some CSS change. Is this possible and how would I do it?
For example:
<div class="example">
<div id="findMe"></Div>
</div>
<div class="example">
<!-- This div would not be found -->
</div>
My guess was:
let parents = $(".example");
for (var i=0; i < parents.length; i++) {
if (parents[i].find('#test').length) {
parents[i].css("prop", "value")
}
}
but parents[i].find is not a function
So you shouldn't have multiple instances of the same ID in a document. But in your example, you were pretty close. However, if you're already using jQuery it will make your life a bit easier.
<div class="example">
<div class="findMe"></Div>
</div>
<div class="example">
<!-- This div would not be found -->
</div>
jQuery:
(I'm using the $ to denote a jQuery collection you wouldn't need it)
A jQuery collection (in this case created by find) always has a length. So you need to test if it's empty. Also $.each() is basically looping through the collection.
let $parents = $('.example');
$parents.each(
function(){
var $el = $(this);
if($el.find('.findMe').length !=0){
$el.css('background', 'red');
}
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px;" class="example">
<div class="findMe">Hello, World!</Div>
</div>
<div style="height:100px;border: solid 1px #000" class="example">
<!-- This div would not be found -->
</div>
As Heretic Monkey said in the comments above, you can use has from jQuery to do this easily.
$(".example").has(".findMe").css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:100px;" class="example">
<div class="findMe">Hello, World!</Div>
</div>
<div style="height:100px;border: solid 1px #000" class="example">
<!-- This div would not be found -->
</div>

Get a div id from a div that has a specific data value

Lets say I have this...
<div class="container" id="continingStuff">
<div class="someClass" id="notLookingForThis" data="dataValue1">
Stuff
</div>
<div class="someClass" id="lookingForThis" data="dataValue2">
Stuff
</div>
</div>
and I want to get the id of the div thats data value is dataValue2, how can I do that with jQuery or Javascript?
You can use Attribute Equals Selector to get element, then you can use attr() method to get id of the element.
Example:
$(document).ready(function() {
var id = $('div[data=“dataValue2”]').attr('id');
console.log(id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=“container” id=“continingStuff”>
<div class=“someClass” id=“notLookingForThis” data=“dataValue1”>
Stuff
</div>
<div class=“someClass” id=“lookingForThis” data=“dataValue2”>
Stuff
</div>
</div>
Using jQuery, you can use this selector:
var id = $("div[data='dataValue2']").attr('id');
Here's working a code snippet:
var id = $("div[data='dataValue2']").attr('id');
console.log(id);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="continingStuff">
<div class="someClass" id="notLookingForThis" data="dataValue1">
Stuff
</div>
<div class="someClass" id="lookingForThis" data="dataValue2">
Stuff
</div>
</div>
you can use this for your code
var id = $('*[data="dataValue2"]').attr('id');

Change color of parent div's color on a condition

I have a html code like below
<div class="class1">
<div class="class2">
<span class="span1"></span>
If the span with class="span1" has no value between begining and ending tags, I would like to change the color of div with class="class1"
However, span is filled with javascript after loading, so should I change the color with JS or CSS? Can anybody show me a way to do it?
I dont have any sample code to display because I am not sure how to start
To determine if specified element has nothing between tags, use html() function provided by jQuery. To change parent's style, use parent() and css() functions. To wait until the DOM is loaded, use ready() function.
$(document).ready(function() {
if (!$('.span1').html()) {
$('.span1').parent().css({ color: 'red' });
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class1">
<div class="class2">text
<span class="span1"></span>
</div>
</div>
document.getElementsByClassName("span1")[0].parentElement.parentElement.style.color = "green";
You can't "go up the dom" by css, only down, so you has to do it with js. Here is som sample code:
$(function(){
$(".span1").each(function(){
if($(this).html() == ""){
$(this).closest(".class1").css("background-color", "red")
}
})
})
span{
height: 10px;
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="class1">
<div class="class2">
<span class="span1"></span>
</div>
</div>
<div class="class1">
<div class="class2">
<span class="span1">filled</span>
</div>
</div>
You can achieve this thing via jQuery using different functions css(),parents(),html().
You need to put your all code inside this $(document).ready() So this will be execute after all DOM data loaded.
For that You just need to use below code:
Html code:
<div class="class1">
<div class="class2">
Hello this is test message.
<span class="span1"></span>
</div>
</div>
And jquery code :
$(document).ready(function(){
$(".span1").html().toString().length > 0 ? $(".span1").parents(".class1").css("background-color","red") : $(".class1").css("background-color","yellow");
});
First we check the length if it's grater 0 then it will execute this
$(".span1").parents(".class1").css("background-color","red")
otherwise this:
$(".class1").css("background-color","yellow");
Here i have set background color using parents and you can directly apply via class name.
I hope this code will help you.

two division put the details in inner div using jquery

i have 2 divisoin
<div id="details">
<div id="feature">
</div>
</div>
I need to put the content using $("#details").html(content); (it is working correctly) like that way i need to put the content inside feature div i am using following way:
$("#details #feature").html(content);
but it is not working..how to solve?
When you use $("#details").html(content); you override the content of the div. So you're inner div with the id feature gets removed. Maybe you use $("#details").prepend(content); or you add another div for the main content and replace that content.
Look here is an example:
https://jsfiddle.net/morrisjdev/s9u7rfcu/
ID is a unique attribute so you can directly use id like below.
$(function() {
var content = "Some text here";
$('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
OR
$(function() {
var content = "Some text here";
$('#details').find('#feature').html(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
$(document).ready(function(){
var htmldetail ="Hello! I am Here";
var details = $("#details").html(htmldetail);
$("#userfeature").html(details);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="details">
<div id="userfeature">
</div>
</div>
The second is #feature and not #userfeature. And also add the jQuery Library as well. You can replace test with content variable.
$("#feature").html("test");
<div id="details">
<div id="feature">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
And also remember Id is unique and hence no need to mention its parent.
Run the following snippet and you can get the output.
Simple way..Go Through this
HTML
<div id="details">
<div id="feature">
</div>
</div>
JQUERY
$(document).ready(function()
{
var content="contain sample data";
// $("#details").html(content); if you wrote like this,
this will replace all content, so the inner div will be replaced
$("#details").append(content); // outer div
$("#feature").html(content);
});
Or you can use css-like selector method:
$(document).ready(function() {
$('#details > #feature').html('Hello <strong>World!!!</strong>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
<div id="feature">
</div>
</div>
I have created a plunk for it and it is working.
Try including the action inside
$( document ).ready(function() {
console.log( "ready!" );
var content = 'Hey there';
$("#details #feature").html(content);
});
Plunk :- http://plnkr.co/edit/63GsIoGmprnKs7oe77cF?p=preview

Get an specific class field content from the same page (Javascript or PHP)

I would like to get the content of an specific div class in Javascript or PHP. I've found some possible solutions but no one worked for me. This is the code of the page:
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label"><label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div></div>
<div class="um-field-area">
<div class="um-field-value">text_to_be_retrieved</div>
</div></div>
The required content is the one containing "text_to_be_retrieved" but the code shall not be aware of the text "text_to_be_retrieved" (it has to retrieve the text just with the surrounding divs information). Is it possible to store it in a PHP/Javascript variable to be used by another algorithm?
Thanks in advance.
You can do it like this, store those values in object:
var obj = {};
var nick = $('.um-field-label label').attr('for');
var val = $('.um-field-label').next('.um-field-area').find('.um-field-value').text();
obj.nickName = nick;
obj.value = val;
alert(obj.nickName + " " + obj.value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Use :contains selector to find elements that contains specified 'text'
If you have a variable holding the text wrapped in div, you can pass the variable in :contains
Try this:
var myText = 'adolfodominguez'; // Variable holding text value
var element = $('.um-field-value:contains("' + myText + '")')
console.log(element);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Your HTML, I appended an element to show you the output.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label">
<label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
</div>
<br>Copied text:
<p class='demo'></p>
Using the jQuery framework of Javascript, you will get the result you are looking for:
var text = $("[for='professional_tag-27326']").parent('.um-field-label').next('.um-field-area').children('.um-field-value').text();
$('.demo').text(text);
https://jsfiddle.net/73mtmLLv/5/

Categories