http://jsfiddle.net/qVfy7/
HTML
<div id='button'></div>
<div id="mydiv">ko</div>
JS
$('#button').click(function () {
$('#mydiv').text('ok');
});
CSS
#button{
width:100px;
height:100px;
background-color:red;
}
On clicking the button, mydiv's text changes. What I want to do, is clicking again on it to change the text back to ko, and so on, alternating between the two values. Is there a way to do that?
Sure, just check what the text is, and return the other value to the text() method
$('#button').click(function () {
$('#mydiv').text(function(_, txt) {
return txt == 'ok' ? 'ko' : 'ok';
});
});
FIDDLE
There are multiple ways, but one them is, make an if-else:
$('#button').click(function () {
if($('#mydiv').text()=="ko")
$('#mydiv').text('ok');
else
$('#mydiv').text('ko');
});
DEMO
Related
I'm trying to change the text of a span when it is clicked depending on the current value it has.
If it is Open - then set value to Close.
If it is Close - then set value to Open.
$('.details_btn').click(function(){
if($(this).text('Open'){
$(this).html('Close');
}else{
$(this).html('Open');
}
});
I've got a fiddle of what I've been doing here:
http://jsfiddle.net/javacadabra/ch0u1xws/
However, it doesn't seem to ever go back from Close to Open and I'm not sure why. Could someone shed some light on this?
Many thanks
Your if statement is a bit wrong. The .text() takes a parameter to set the text, simply call it parameterless to return the current text. So:
if($(this).text('Open')){
Should be:
if($(this).text() == 'Open'){
The text() function either retrieves or set's the inner text of an element. So to test it's current value you should use:
if($(this).text() == "Open")
Instead of
if($(this).text('Open'))
Update to your fiddle: http://jsfiddle.net/ch0u1xws/2/
$(document).ready(function(){
$('.details_btn').click(function(){
if($(this).text() == 'Open'){
$(this).html('Close');
}else{
$(this).html('Open');
}
});
});
To get the current value, don't provide any parameters to the .text() function, as others have mentioned. But an alternative solution is to pass a function in to manipulate the current value, like this:
$(document).ready(function(){
$('.details_btn').click(function() {
$(this).text(function(i, text) {
return text == 'Open' ? 'Close' : 'Open';
});
});
});
$(document).ready(function(){
$('.details_btn').click(function() {
$(this).text(function(i, text) {
return text == 'Open' ? 'Close' : 'Open';
});
});
});
.details_btn{
background-color: red;
color:white;
padding:20px;
text-transform:uppercase;
font-family:calibri;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="details_btn">Open</span>
I'm new to javascript and jquery, and I have this little bit of code to swap one bit of text for another that works perfectly except for the very first time you click the div.
Any ideas? I'm probably just calling on it wrong but not sure how to proceed
Here's a fiddle: http://jsfiddle.net/pauljackson/4r8v6/
js:
$(document).ready(function() {
$("#showemail").click(function() {
var $self = $(this);
if ($self.text() == "Contact")
$self.text("someguy#theinternet.com");
else
$self.text("Contact");
});
});
html:
<div id="showemail">
Contact
</div>
css:
#showemail:hover {
cursor:pointer;
}
Thanks!
Your text has some whitespace originally, trim it:
if ($self.text().trim() == "Contact")
The reason it works the second click is because your else condition sets the text to "Contact" without whitespace - then the next time you click your condition evaluates to true and all is well
Fiddle: http://jsfiddle.net/4r8v6/3/
Heres an update. Note the trim. It seems there is some additional text in the #showemail div that needs to be trimmed.
$(document).ready(function() {
$("#showemail").click(function() {
var $self = $(this);
console.log($self.text());
if ($self.text().trim() == "Contact") {
$self.text("someguy#theinternet.com");
}
else {
$self.text("Contact");
}
});
});
I have a div that contains an image :
<div class="HD">
<img class="image1"src="img/myimage.png">
</div>
the CSS applied to it is :
.HD img {
position:absolute;
top:570px;
left:1120px;
width:30px;
height:90px;
cursor:pointer
}
I want to apply a click function to the image inside the div. However, when I give an image id or class and use that to create the function the javascript does not fire. When the div does not have an image and I use the class the javascript works as expected.
Below is the Javascript function :
$(".HD").click(function () {
if($('.UpperDiv').attr('data-visible') == "hidden") {
$('.UpperDiv').attr('data-visible', 'visible');
$('.UpperDiv').animate({
opacity:1
// top:'250px'
});
} else {
$('.UpperDiv').attr('data-visible','hidden');
$('.UpperDiv').animate({
opacity:0
// top:'250px'
});
}
});
What could be the reason ? What is wrong with my code ?
How can I fire the javascript, when the user clicks on a div that contains an image?
For reference, this is the website I am trying to make, and the original working version.
Can't you just use .toggle?
$(".HD").toggle(400);
Or .fadeToggle?
$(".HD").fadeToggle();
Try :
$(".HD").on({
click : function(){
if($('.UpperDiv').attr('data-visible')=="hidden")
{
$('.UpperDiv').attr('data-visible','visible');
$('.UpperDiv').animate({
opacity:1
// top:'250px'
});
}else{
$('.UpperDiv').attr('data-visible','hidden');
$('.UpperDiv').animate({
opacity:0
// top:'250px'
});
}
}
}, 'img');
$(".HD > img").click(function () { });
Use this and try.
I have 3 radio buttons, when one of them is selected I want to automatically put text in a textbox.
For example, If the user selected the 'TBA' radio button, I want the text 'To Be Advised' put in the textbox, and if they select another radio button I want it to be cleared.
Can anyone help me??
http://jsfiddle.net/ej2hf/1/
Thanks in advance!
This should do:
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val($(this).val());
});
Live demo: http://jsfiddle.net/ej2hf/2/
Try this then
http://jsfiddle.net/ipsjolly/KNct8/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val($(this).val());
}
else
{
$('input[type="text"]').val('');
}
});
OR
http://jsfiddle.net/ipsjolly/KNct8/1/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val('To Be Advised');
}
else
{
$('input[type="text"]').val('');
}
});
In addition to populate the textbox with the value which is selected by default on page load use the below code:
$(document).ready(function(){
$('input[type="text"]').val($('input[name="dest_type"]').val());
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val ($(this).val()); });
});
Assuming that you are or can use the latest jQuery, you can use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val($(this).val());
});
});
See the Fiddle!
If what you need if to toggle the value of TBA, use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val( (($(this).val()=='tba')?($(this).val()):('')) );
});
});
See this Fiddle!
If none of this is what you are trying to do, please rephrase the question or add some more information!
try this,
$(document).ready(function () {
$('input:radio[name="dest_type"]').change(function () {
$("input:text").val($(this).val());
});
})
I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.
It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});
You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/