I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>
It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')
First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.
Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')
You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>
As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')
Related
I've an AngularJS page and I want it to change ng-src value of an element when clicking on another element. I intialized variable src:
data-ng-init="src='assets/img/projects/1'
Then I made this element:
<img data-ng-src="{{src}}/1.jpg" id="img1">
And finally I want when someone clicks on my link, It change that src to {{src}}/1a.jpg, So I tried this:
(Don't care about my empty link, I know how to click on it...), My problem is, The value of src doesn't change and My page is still the first image, How can I improve my code to change value {{src}}/1.jpg to {{src}}/1a.jpg?
Very very wrong code, You combine standard DOM modification with angular. Choose only one solution not combine in this way. Check my example code:
var app=angular.module("image",[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="image" ng-init="src='https://www.gravatar.com/avatar/161dac2e231b0f6b4340000328e18bcf?s=328&d=identicon&r=PG&f=1'">
<img data-ng-src="{{src}}" id="img1">
<button ng-click="src='https://www.gravatar.com/avatar/a5af44879d481c3c15a4b2dd55007322?s=328&d=identicon&r=PG'" >Change image src to different</button>
</div>
So only set src scope variable to different src and it works like a charm.
ng-click="src='different src'"
Create new varibale image
data-ng-init="src='assets/img/projects/1'; image='1.jpg'"
Then HTML Element
<img data-ng-src="{{src}}/{{image}}" id="img1">
If someone clicks on you link the change the image value
Hope this helps ! Thanks.
Set ng-click to function in your controller, that changes "src" variable in your scope.
I work on a durandal project.
I have span and button elements in html.
The span elements are hidden and I want to show these on button click.
My problem is that when I hide the span from html- it can't show it from javascript.
I saw this question (on link change visibility of label tag using jquery) and I tried all of the answers- nothing helped me.
(I tried using:
in html:
<span id="mySpan" hidden = "hidden">aaa</span>
or:
<span id="mySpan" style= "visibility:collapse">aaa</span>
or:
<span id="mySpan" style= "display:none">aaa</span>
in javascript:
$("#mySpan").show();
or:
$("#mySpan").css('visibility', 'visible');
I tried all of the optional combinations
)
Note: I want you to know that when I'm not hiding the span from the HTML, and try using toggle(), hide(), show() - it works well.
Example that does not work:
on html page:
<span id="mySpan" hidden = "hidden">aaa</span>
on javascript page:
$("#mySpan").show();
Your HTML is not OK!
Remember, spans are closed <span></span> this way, and not the way you are closing them! That way, only self-closing elements such as: input, img etc are closed!
Try to write this:
<span id="mySpan">Some text!</span>
The CSS would be:
#mySpan {
display: none; // you're using diaplay!
}
Now using jQuery either use this:
$('#mySpan').show()
Or this:
$('#mySpan').css('display', 'block');
Well, your code is all wrong.
The id attribute should only be used once per page. It is meant to be unique so that you can refer to it as a single point in the document. You should change it to class="mySpan" and then select them using $(".mySpan").
visible:collapse is invalid CSS. You probably meant to use visibility, yes?
diaplay:none is also invalid CSS. Probably a typo of display, yes?
There is a hidden attribute in the newest HTML spec (usually called HTML5). I am not sure if you are aware of it; if you are, and you are trying to use it, then you should put the following in your CSS file so that it works in browsers that have not yet implemented it:
*[hidden] {
display: none;
}
Follow-up:
Okay, you want to be able to toggle a span on and off by clicking on a button. This will do it:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button id="myButton">Show/hide the span</button><br>
<span id="mySpan" style="display:none">This is a span with some text in it</span>
<script>
$(function() {
$("#myButton").click(function() {
$("#mySpan").toggle();
});
});
</script>
Seems to be an error in "diaplay"? Try to change:
<span id="mySpan" style="diaplay:none"/>
to:
<span id="mySpan" style="display:none"/>
I have a span tag like this and stored in the variable "foo"
<span class="right margin">
سی ئی 1500
<br>
Nicole Kidman
</span>
Using jQuery OR javascript, how can I change the "Nicole Kidman" clause with something I want? innerHTML changes everything in the <span>
Edit: I edited the text with this code foo[0].lastChild.nodeValue="something else"; but is there another way doing that using only jQuery?
I recommend you add another span tag around Nicole Kidman.
<span class="right margin">
سی ئی 1500
<br>
<span>Nicole Kidman</span>
</span>
and change the text like this:
$(".right").find("span").text("something you want");
<span> is an inline element. We avoid using <br/> in them.
It is also advisable to use another tag to encapsulate your 'Nicole Kidman' text.(Like another <span>)
I'm not aware of your entire HTML structure so I'm going with what you have posted. Here is a fiddle example for how it can be done.
Here the foo is not a jQuery object:
foo.lastChild.textContent='something you want'
So the foo is a jQuery object, but you still need to access the dom element directly:
foo.contents().eq(-1).textContent='something you want'
I have this code for a small jQuery game I'm making, and all the pictures (characters) are hidden by default. There's a question that says "Are you ready to play?" and a yes or no button. When you click the yes button, it hides the buttons and the text. It is also supposed to display the first image, which is #main. For some reason, it's not working.
Here's the jQuery code with the images under:
$(document).ready(function(){
$('#main,#batman,#car,#hobo,#knife,#gangfight,#ganggun,#gangknife,#blood').hide(-100);
var main=$('#main');
batman=$('#batman');
car=$('#car');
hobo=$('#hobo');
cop=$('#cop');
knife=$('#knife');
gangfight=$('#gangfight');
ganggun=$('#ganggun');
gangknife=$('#gangknife');
blood=$('#blood');
document.write('<title>LOAUP</title>');
document.write('<center><h1>The life of an unlucky person</h1></center>');
document.write('<center id="start">Are you ready to play?</center>');
document.write('<center><button id="yes">Yes</button><button id="no">No</button></center>');
$('#yes').click(function(){
$('#yes,#no').hide(function(){
$('#start').hide();
$('#main').show
});
});
$('#no').click(function(){
$('#yes,#no').hide();
$('#start').hide();
document.write('<center>Ok, come back another time then.</center>');
});
});
//Images below this (HTML)
<img id='main' src='/jquery/sprites/spritePerson.png' />
<img id='batman' src='/jquery/sprites/spriteBatman.png' />
<img id='car' src='/jquery/sprites/spriteCar.png' />
<img id='hobo' src='/jquery/sprites/spriteHobo.png' />
<img id='cop' src='/jquery/sprites/spriteCop.png' />
<img id='knife' src='/jquery/sprites/spriteKnife.png' />
<img id='gangfight' src='/jquery/sprites/spriteGangFight.png' />
<img id='ganggun' src='/jquery/sprites/spriteGangGun.png' />
<img id='gangknife' src='/jquery/sprites/spriteGangKnife.png' />
<img id='blood' src='/jquery/sprites/spriteBloodPuddle.png' />
Edit:
Here's the example:
http://jsbin.com/ocowas/1
In your #main click function change
$('#main').show
to
$('#main').show();
Your variable list should be comma seperated not colon seperated. and you may also want to rename your variables to make them more obvious and easier to read/remember by prefixing with a $ sign. For example when you store a selector as a variable use
var $element = $('#element'),
$element2 = $('#element2'),
$element23 = $('#element23');
Further, the hide() function does not take negative numbers as you have used. Just use hide() for an instant hide, or hide(100) for fast, hide(2000) for slow.. check: http://docs.jquery.com/Effects/hide
To append html to your document without using document.write, you can store the html as a variable, then select the body tag, or any other tag and append/prepend or replace the html to that, for example.
$('body').append(yourHTMLvar);
$('body').prepend(yourHTMLvar);
$('body').html(yourHTMLvar);
The 'title' tag should only appear between the 'head' tags of your html document. Use a heading tag instead, 'h1' to 'h6'.
The html 'center' tag is also deprecated as far as I know. Try using 'span', 'p' or even 'div' instead.
I have a <td> that looks something like this:
<td class="myTDClass">
<span class="spanClass">Header</span>
<br />
<img class='myImages' style='cursor: hand;' onclick='doSomething(control)' alt='this is my alt Text'></img>
<br />
<span style="color: #123456;">More Text</span>
<br />
<a class='findThisClass'>Insert Alt Text Here</a>
</td>
This calls some jQuery code that sets the alt tag to some new text. Then, i want it to set the <a> element to some new text. Here is the jQuery code:
doSomething = function(control)
{
var $myControl = $(control);
$myControl.attr("alt", "This is the new Alt Text!");
var $newControl = $(control).parent().siblings().find(".findThisClass").first();
alert($newControl.find("a").text());
});
The jQuery code sets the alt tag great, but doesn't find the <a class=findThisClass />.
I think I'm using the .parent() and .siblings() wrong. Can anyone find my error? The idea here is that I can search just inside the <td> for the <a> element, and not touch the other elements in other <td>s
Try this instead:
var $newControl = $(control).closest('.myTDClass').find(".findThisClass");
alert($newControl.text());
Also img is self closing tag, instead of:
<img></img>
Just use:
<img... />
And instead of:
onclick='doSomething(control)'
Use:
onclick='doSomething(this)'
so that jQuery has really a control to work with :)
Working Example
Assuming you want to find the <a> that's in the same table cell as your <img>, you don't need to use parent(). All you need to do is call .siblings Try:
var $newControl = $(control).siblings('a.findThisClass').first();
This assumes control points to the image within the table cell.
$("a.findThisClass", $myControl).first()
a is a sibling of the image, so, simply:
$(control).siblings(".findThisClass")