I'm trying to change the src of an image. I'm able to change it on console but I can't put it to work on my javascript file. The code I ran is the same as the code on my file.
Here is the excerpt of my code where it's giving me problems:
$(document).ready(function(){
$(document).on("click", ".grid-zonaAzul div img", function(event){
if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
var parentClass = $(event.target).parent().attr("class");
var classDots = "." + parentClass.split(" ").join(".");
console.log(classDots);
document.querySelector(classDots + " > img");
// document.querySelector(classDots + " > img").setAttribute("src", "imagens/reservaCadeiras/cadeira1.png");
};
};
});
});
And on HTML there's something like this:
<div class="grid-zonaAzul">
<div class="linha1a coluna1a"><img src="imagens/reservaCadeiras/cadeira1.png"></div>
</div>
The var parentClass
is giving me the class linha1a coluna1a
, which is correct. But because I need it with dots, I'm running the line var classDots = "." + parentClass.split(" ").join(".");
to turn the string to .linha1a.coluna1a
. Also, the console.log
So basically I'm trying to get the only image inside de class .linha1a.coluna1a
. The problem starts here, because the commented line isn't doing anything but if I run document.querySelector(".linha1a.coluna1a > img").setAttribute("src", "imagens/reservaCadeiras/cadeira1.png")
, it works on console.
Edit:
I'm sorry, I didn't explained somethings.
I have an image, when I click on it it changes to other image. This is working correctly. The code I posted was running when I clicked on the image again to replace the second image to the first image it was showing.
Essentially, the first click changes the src to imagens/reservaCadeiras/cadeiraSelecionada1.png
and the second click changes to imagens/reservaCadeiras/cadeira1.png
.
I've found the problem, it was a stupid error. I never thought the problem was on something else other the first if
. My code was this:
$(document).ready(function(){
$(document).on("click", ".grid-zonaAzul div img", function(event){
if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionada1.png") {
$(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
}
if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
var parentClass = $(event.target).parent().attr("class");
var classs = "." + parentClass.split(" ").join(".");
console.log(classs);
document.querySelector(classs + " > img")
// .setAttribute("src", "imagens/reservaCadeiras/cadeira1.png");
// $(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
}
if ($(".w3-select").val() == "sim") {
$(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png");
}
else {
$(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionada1.png");
}
}
});
});
The problem was it was entering on the second if
and then on the third if
. This was easily corrected by using else if
.
Solution:
$(document).ready(function(){
$(document).on("click", ".grid-zonaAzul div img", function(event){
if ($(event.target).attr("src") != "imagens/reservaCadeiras/cadeiraIndisponivel1.png") {
if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionada1.png") {
$(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
}
else if ($(event.target).attr("src") == "imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png") {
$(event.target).attr("src","imagens/reservaCadeiras/cadeira1.png");
}
else if ($(".w3-select").val() == "sim") {
$(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionadaChapeu1.png");
}
else {
$(event.target).attr("src","imagens/reservaCadeiras/cadeiraSelecionada1.png");
}
}
});
});