I am using a simple piece of JS to change the image that is in a div from plus to minus. I have multiple divs on this page which are generated dynamically. How could I specifically change the sign on the div that is clicked. Currently I have the same class for each div. This means whenever I click any div only the first divs image changes, not the div that was clicked.
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity" onclick="changeImage()">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("plus")) {
image.src = "img/minus.svg";
} else {
image.src = "img/plus.svg";
}
}
Is the only way to fix this dynamically assigning new class to each div and generating multiple scripts for teach class?
EDIT:
I am using the same method as before but on a slightly different layout. Any reason why this isnt working?
<div class="open-link" style="display: block;">
<a href="#" class="img-change">
<p class="inner">Expand <br><img id="myImage" src="img/arrow-down.svg" width="20" height="20"></p>
</a>
</div>
JS
$(document).on('click','a.img-change',function(){
var $img = $(this).find('p.inner');
if($img.attr('src').match("down"))
$img.attr('src','img/arrow-up.svg');
else
$img.attr('src','img/arrow-down.svg')
});
Every img in your markup has the same id, this is bad, all elements, if they have an id, should be unique. This does NOT mean you should use a unique id on every image and a specific script for every button! That would be bad. Just remove the duplicate id's!
Then this is pretty easy, use jQuery to attach a click event to every div and look for the image within it
take off the in-line onclick
<div class="hover2 opacity">
and use jQuery
$(document).on('click','div.hover2',function(){
var $img = $(this).find('p.heading img');
if($img.attr('src').match("plus"))
$img.attr('src','img/minus.svg');
else
$img.attr('src','img/plus.svg')
});
You don't need to assign an id to the <img/> elements
HTML
<div class="hover2 opacity" onclick="changeImage(this)">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view
<span class="s-right">
<img src="img/plus.svg" width="20" height="20">
</span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
JS
function changeImage(el){
var img = el.querySelector('span > img');
img.src = (img.src.match("plus")) ? "img/minus.svg" : "img/plus.svg";
}
You can try this:
$(document).ready(function() {
$(".opacity").on("click", function() {
var source = $(this).find("img").attr("src"); // Gives source of image inside the presently clicked div
console.log(source);
if (source.match("plus")) {
console.log("match");
$(this).find("img").attr("src", "img/minus.svg");
} else {
$(this).find("img").attr("src", "img/plus.svg");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
<div class="hover2 opacity">
<h3><a>Test</a></h3>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<br>
</div>
U still can use $(this).find('img') to find img for selected div and change the src.
Example
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage1" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
<div class="layer1">
<p class="heading">view <span class="s-right"><img id="myImage2" class="myImage" src="img/plus.svg" width="20" height="20"></span>
<br>more</p>
<div class="content">hello</div>
</div>
So it your javascript, u can use this
$(document).on('click','div.hover2',function(){
$(this).find('img').attr("src","img/minus.svg");
}
Jsfiddle link -> https://jsfiddle.net/w1yb5fcc/1/
Related
I'm having difficulty writing the document.querySelector for the following code. Currently I've written this code as querySelector but it does not encompass everything...
Please help me improve this, thank you.
Edit: as there seemed to be some confusion, let me elaborate. I would like all the elements, from div, a, img, everything to be encompassed in the querySelector.
var areaa = document.querySelector("#menu #envelope #links");
<div id="menu">Click here to browse the internet.
<div id="envelope">
<div id="links" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
Edit 2 - as more code was required (the href elements are removed / added as needed)...
var menu = document.getElementById("menu");
var areaa = document.querySelectorAll(".areaa");
menu.addEventListener("mouseenter", addHref);
//areaa.addEventListener("mouseleave", remHref);
document.addEventListener("mousemove", function(){
if(this != areaa){
remHref();
}
});
menu.addEventListener("click", addHref);
document.addEventListener("click", function (){
if (this != areaa){
remHref();
}
});
var g = document.getElementById("g");
var s = document.getElementById("s");
function remHref (){
if (g.hasAttribute("href")){
g.removeAttribute("href");
}
if (s.hasAttribute("href")){
s.removeAttribute("href");
}
}
function addHref (){
setTimeout(activate, 250);
}
function activate (){
document.getElementById("g").setAttribute("href", "https://www.google.com");
document.getElementById("s").setAttribute("href", "https://www.example.com");
}
you might want to add a class to all elements you want to be captured, then use document.querySelectorAll
var areaa = document.querySelectorAll(".my-class");
html shoud look like this:
<div id="menu" class="my-class">Click here to browse the internet.
<div id="envelope" class="my-class">
<div id="links" class="my-class">
<div>
<a id="g" class="redirect">
<img class="my-class" id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
If you want to select everything you can use the below:
var areaa = document.querySelectorAll("#menu #envelope #links *");
If you want to be more specific you can do the following (the code below will select all of the anchor tags and images inside #links):
var areaa = document.querySelectorAll("#menu #envelope #links a, #menu #envelope #links img");
You can use querySelectorAll
The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors.
Learn more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
You can use it like this:
var areaa = document.querySelectorAll('*');
This will return all items.
You can replace document with the container if you want to restrict this to a specific div.
2 things, either add a class to every div
<div id="menu" class="area">Click here to browse the internet.
<div id="envelope" class="area">
<div id="links" class="area" >
<div>
<a id="g" class="redirect">
<img id="google" src="assets/google.png" />
</a>
</div>
<div style="width: 20%;"></div>
<div>
<a id="s" class="redirect">
<img id="sava" src="assets/Logo_Sava.png"/>
</a>
</div>
</div>
</div>
</div>
and select all divs by
let areaa = getElementsByClassName("area");
or you can use document.querySelectorAll("yourclassname") to access all divs of that class name
I have a page where you select between 2 pictures, when you click one of them, the content of the div changes. The new content also has 2 pictures which will load another content when clicked. I am using javascript, but the script only loads once, so when I get to the second content, it doesn't change anymore.
I got 3 files:
Main.html - content1.html - content2.html - script.js
Main.html:
<div id="change">
<div id="rightside">
<img src="img.jpg" class="class1" id="water" alt="right choice">
</div>
<div id="leftside">
<img src="img2.jpg" class="class1" id="water2" alt="left choice">
</div>
</div>
<script type="text/javascript" src="../js/script.js"></script>
Here is the content that will be replaced in the class change:
content1.html:
<div id="rightside">
<img src="img3.jpg" class="class1" id="water3" alt="right choice">
</div>
<div id="leftside">
<img src="img4.jpg" class="class1" id="water4" alt="left choice">
</div>
this is the content that i want to replace on the next click:
content2.html:
<div id="rightside">
<img src="img5.jpg" class="class1" id="water5" alt="right choice">
</div>
<div id="leftside">
<img src="img6.jpg" class="class1" id="water6" alt="left choice">
</div>
This is the script that suppose to do that:
window.onload = function() {
document.getElementById("water").onclick = function()
{
$('#change').load('content1.html');
};
document.getElementById("water3").onclick = function() {
$('#change').load('content2.html');
};
If I click the image with id water, it replace with content1, then I click the image with water3, nothing happens
You can use the complete call back to bind the new element:
window.onload = function() {
document.getElementById("water").onclick = function()
{
$('#change').load('content1.html', function() {
document.getElementById("water3").onclick = function() {
$('#change').load('content2.html');
};
});
};
};
Reference: http://api.jquery.com/load/
I have some images and when I click on one of them a text appear. Then I want when clicking on another to show me the current text for that image.But now when click on another image, the previously text dissapear and have to click one more time on my image to display its text.It makes any sense?
My code is:
function showHide(a) {
var div = document.getElementById("word");
if (div.style.display == 'none') {
div.style.display = '';
$('#word').text(a);
}
else {
div.style.display = 'none';
}
}
<div class="2">
<span id="word" style="display:none"></span>
</div>
<div class="responsive">
<div class="img">
<center><h1>House</h1></center>
<audio id="sound9" src="audio/window.mp3" ></audio><a onclick="document.getElementById('sound9').play();showHide('Window');"><img src="house/window.jpeg" id="window" alt="window" width="220" height="160"></img></a>
<span id="img9"></span>
<audio id="sound10" src="audio/table.mp3" ></audio><a onclick="document.getElementById('sound10').play(); showHide('Table');"><img src="house/table.jpg" id="table" alt="table" width="220" height="160"></img></a>
<span id="img10"></span>
</br>
<audio id="sound11" src="audio/roof.mp3" ></audio><a onclick="document.getElementById('sound11').play();showHide('Roof');"><img src="house/roof.jpg" id="roof" alt="roof" width="220" height="160"></img></a>
<span id="img11"> </span>
<audio id="sound12" src="audio/floor.mp3" ></audio><a onclick="document.getElementById('sound12').play();showHide('Floor'); "><img src="house/floor.jpg" id="floor" alt="floor" width="220" height="160"></img></a>
<span id="img12"> </span>
</div>
</div>
As you using Jquery, use it fully. Problem is after first click data is displayed and when you click on another image, your function checks if the visibility is none, which is false, and goes in else case and makes it hidden and in next click it checks again and this time goes in if condition and shows the text.
function showHide(a) {
var div = $('#word');
div.text(a);
if (!$(div).is(":visible")) {
div.show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="2">
<span id="word" style="display:none"></span>
</div>
<div class="responsive">
<div class="img">
<center><h1>House</h1></center>
<audio id="sound9" src="audio/window.mp3" ></audio><a onclick="document.getElementById('sound9').play();showHide('Window');"><img src="house/window.jpeg" id="window" alt="window" width="220" height="160"></img></a>
<span id="img9"></span>
<audio id="sound10" src="audio/table.mp3" ></audio><a onclick="document.getElementById('sound10').play(); showHide('Table');"><img src="house/table.jpg" id="table" alt="table" width="220" height="160"></img></a>
<span id="img10"></span>
</br>
<audio id="sound11" src="audio/roof.mp3" ></audio><a onclick="document.getElementById('sound11').play();showHide('Roof');"><img src="house/roof.jpg" id="roof" alt="roof" width="220" height="160"></img></a>
<span id="img11"> </span>
<audio id="sound12" src="audio/floor.mp3" ></audio><a onclick="document.getElementById('sound12').play();showHide('Floor'); "><img src="house/floor.jpg" id="floor" alt="floor" width="220" height="160"></img></a>
<span id="img12"> </span>
</div>
</div>
</body>
how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image
If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.
Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});
Hey all,
Earlier I received some help toggling between three hidden divs in a photo library. I'd like to add an underline to the anchors toggling which div to show. The script is dynamic... and therein lies my problem. I'm not sure how to tell which anchor to underline within the code. Suffice it to say that it's beyond my grasp!
I'd also like for the first of the three anchors, Promo, to load underlined.
Thanks for your help!
HTML:
<div class="text" id="content">
<h2>PHOTOS</h2>
<hr />
<p align="left"><a class="showlink" id="show_promo">PROMO</a> <a class="showlink" id="show_studio">STUDIO</a> <a class="showlink" id="show_live">LIVE</a></p>
<div class="section" id="promo">
<p align="center">PROMO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="studio">
<p align="center">STUDIO</p>
<p align="center">
<img src="#">
</p>
</div>
<div class="section" id="live">
<p align="center">LIVE</p>
<p align="center">
<img src="#">
</p>
</div>
</div>
Javascript:
$('a.showlink').click(function(){
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});
Try this:
$(function(){
$('a.showlink').css("text-decoration", "none");
$("#show_promo").css("text-decoration", "underline").click();
});
$('a.showlink').click(function(){
$('a.showlink').css("text-decoration", "none");
$(this).css("text-decoration", "underline");
var toShow = this.id.substr(5);
$('div.section:visible').fadeOut(600, function(){
$('#' + toShow).fadeIn(600);
});
});