I have this piece of code, which allows me to change the image by clicking on it.
$('img').click(function(){
var src = this.src;
this.src = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
});
I would prefer to click on another element to still be able to change the image. When I change the part in $('myelement'), I need to make sure that the part var src = this.src; refers to the image.
In what do I have to change the this?
Assuming you have only one img tag in your HTML:
$('myelement').click(function(){
var src = $('img').attr('src');
var newSrc = src.indexOf('_b.jpg') == -1 ? src.replace('.jpg','_b.jpg') : src.replace('_b.jpg','.jpg');
$('img').attr('src', newSrc);
});
But generally it's better to select with more specific selector, like id or some unique class attribute, as you might want more images in the document - then $('img') will select an array of all images.
In javascript this refers to current object, in other words contex. General practice is storing context into a variable so that when context changes, lets say by a dom event, you can still reach it.
// stores context into that variable
var that = this;
But apparently your question has nothing to do with this. If you need to change image attributes from another element, you need select the img tag and act on it.
$('.another-element').click(function(){
var newSrc = 'Here goes the new scr attribute';
$('img').attr('src',newScr);
});
You can use id or class for more precise selection.
Related
I have an assignment where I need to make a photo appear when I click on another photo. I need to put each image in an array and call on it to appear when I click on the corresponding photo. When I click on another photo, I need to remove the existing photo and replace it with another one. I need to do it with Javascript and the DOM. I'm unsure how exactly I would do this. Here's my code so far:
var photoDiv = getElementById("photos");
document.getElementById("0").addEventListener("click", function () {
var img = createElement("img");
photoDiv.appendChild(img);
})
I know it's completely wrong but I don't know what to do to fix it :(
You have to add the image source of your image.
After this line:
var img = document.createElement("img");
img.src = 'pathto/yourimg.png_or_jpg'; // You need this.
Also, it's always a good practice to use document.getElementById() (or putting the parent) instead of just getElementById().
Instead of creating a new image you can also replace only the src of the image element, something like this:
// get the image
var imgElement = document.getElementById("myImage");
// add the listener
imgElement.addEventListener("click",
function () {
// update the src of the image
imgElement.src = "https://www.w3schools.com/html/img_girl.jpg";
});
and that's all, you should not create a new element and append it to the DOM element.
I am using this code for my carousel, I want to change src attribute of an <img> tag base on it's parent "aria-selected" attribute set it to "true" manually.
$(".item").on('click',function(event){
$(this).parent('a').attr("aria-selected","true")
}
How can I achieve this, with javascript?
If I understand correclty you want to get the image element in the current item scope and replace its src. So something like this should work:
links.forEach(function(item) {
item.setAttribute("aria-selected", "false");
var image = item.querySelector('img');
var currentSrc = image.getAttribute('src');
var newSrc = currentSrc.replace('.png', '-active.png');
image.setAttribute('src', newSrc);
});
Context: I am trying a workaround to the lazyload script that does not work well for my setup.
I am not sure this is realistic but, this is what I have in mind:
On a title section click, I want to change all the attributes of the images contained in the section (so the images show).
From data-original to src.
Here is were I am:
$('#s101').click(function(){
var a = $('#b01').next().find('img').attr("data-original");
// alert (a) // will give me the url of the attr. data-original: (http...)
x = a.getAttribute("data-original");
a.setAttribute("src", x);
a.removeAttribute("data-original");
});
This does not work. Could you help?
Try this
$('#b01').next().find('img').each(function(){
$(this).attr("src", $(this).attr("data-original") ).removeAttr("data-original");
});
Following along with your "click" handler methodology, you'd want to do something like this...
$("#btnChangeImage").click(function(){
var a = $("#myImg");
var x = a.attr("data-original");
a.attr("src", x);
a.removeAttr("data-original");
});
Basically, the problem is you're trying to act on an attribute and not an element, and then once you have that attribute you seem to be using an old jQuery API version.
Here's a quick plunk to demonstrate: https://plnkr.co/edit/3kZGz5kDLwaBDmGFzsWU?p=preview
I'm trying to add a search link to an online form with a userscript using jQuery. I don't work too much in firefox and I feel like things that would normally work in chrome don't in ff 9/10 times for me. But anyway... this needs to be with ff.
I'm taking the text from a <p> element and creating a search url out of it (or trying to). Right now this is the function I'm trying that should be doing it... but it's doing nothing, not even any errors in console
$(function() {
var companyName = $('p')[7]; // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var mixRankUrl = $("<a></a>").innerHTML("Search Mixrank"); // Create an <a> element
mixRankUrl.href = 'https://mixrank.com/appstore/sdks?search=' + companyText; // Define the href of the a element
var sdkPara = $('label.control-label')[10]; // Where I want it to go
sdkPara.append(mixRankUrl); // Append the element
});
Also, whoever wrote the html uses hardly any ids, and most classes are assigned to 10 or more elements... so unless there's a better way, I'm sort of stuck using node selectors (which stay the same form to form).
The problem is that you try to use jQuery method on DOM element. Don't understand why you don't have any errors with your code.
For exemple : $('p')[7] return a DOM element while $('p').eq(7) return a JQuery object. So you can't use a jQuery method like text() on your DOM element. You need to deal with jQuery object.
For the same reason, you had a problem with the declaration of your label object and with the modification of the href attribute of your link.
Try like this :
$(function() {
var companyName = $('p').eq(7); // Element that contains the name text
var companyText = companyName.text(); // Retrieve the text from element
var sdkPara = $('label.control-label').eq(10); // Where I want it to go
var mixRankUrl = $('<a>',{
text: 'Search Mixrank',
href: 'https://mixrank.com/appstore/sdks?search=' + companyText
}).appendTo(sdkPara); // Append the element
});
I am trying to change content of the first cells of rows into some images. Below is my Javascript code which doesn't work. I tried to use p.appendChild(img), but as it's in a for loop, each time I pressed the button that invokes this, it will append another image to that row. I reckon that I am not using .src correctly? Can someone please help?
var rowx =document.getElementById(rowid); //the row that I want to change its first cell
var uri= "baseuri"+rowid;
img = document.createElement('img');
img.src= uri;
var p = rowx.cells[0];
p.src=img; //this doesn't change the first cell's content.if I use p.appendChild(img) it will append new img each time it gets executed.
cells gives you an HTMLCollection of td elements, which do not support a source attribute. if you want to edit the content you would need to append or modify its innerHTML, like
rowx.cells[0].innerHTML="";
rowx.cells[0].appendChild(img);
You don't need to create another image, you can simply change the src property of the current one:
rowx.cells[0].querySelector('img').src = uri;
If the image is the only (or 1st) element inside the cell, you can use firstElementChild, even better:
rowx.cells[0].firstElementChild.src = uri;
References: querySelector and firstElementChild
.