<div class="circle done">
<span class="label">1</span>
my code is above
I want to change 1 into a tick if div has "done" class
How do I do that ?
$(document).ready(function() {
$(".done span.label").html("your tick html");
});
Use this on your body tag:
<body onLoad="tick()">
And add this in your javascript
function tick(){
var labeltext = $('.label').val();
if (labeltext == "1"){
$('.done').text("✓");
}else{}
};
$( document ).ready(function() {
console.log( "ready!" );
const el = $(".circle");
if (el.hasClass('done')) {
$( "span.label" ).html('done');
}
});
This is done with jQuery, you first wait for the DOM to load, once it has. Then check if 'done' class is applied to the element if it is then change content of the span tag.
This should do it...
$(document).ready(function (){
$(".done").next("span").html("✔");
}
);
Related
Is there a way to put multiple classes in one code?
I have many of those ".dwlnd-trg" classes. Like ".dwlnd-trg2", ".dwlnd-trg3" ".dwlnd-trg4" and ".dwlnd", ".dwlnd2", ".dwlnd3", ".dwlnd4" and so on.
Only ".s-dwlnd" stays always the same because this is the class which displays an animated svg image.
At the moment i have copied and pasted a working code in my website's head and it's great but would it be much cleaner if it's not 4, 6 or soon 8 instead of one good looking code? :) I tried to but without success...
here's the code looking so far:
$( document ).ready(function() {
$( ".dwlnd-trg" ).click(function() {
$( ".dwlnd" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
$( document ).ready(function() {
$( ".dwlnd-trg2" ).click(function() {
$( ".dwlnd2" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd2").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
$( document ).ready(function() {
$( ".dwlnd-trg3" ).click(function() {
$( ".dwlnd3" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd3").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
$( document ).ready(function() {
$( ".dwlnd-trg4" ).click(function() {
$( ".dwlnd4" ).addClass( "s-dwlnd" );
setTimeout(function() {
$(".dwlnd4").removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});});
In my opinion, this is a cleaner solution.
Besides the fact that your function becomes concise, easy to understand and maintain and you don't have to update it to add new items, on the markup side it separates the meaning of class (as a style anchor) from what it's working as a selector for the function.
I can't know your context but, If you also don't need different classes for the target div, you can also use attributes to set the right target.
$( document ).ready(function() {
$(".dwlnd-trg").click(function() {
// save the target reference via ref attribute
var intref = $( this ).attr( 'ref' );
// pass the target reference to get the right one
$( ".dwlnd"+intref ).addClass( "s-dwlnd" );
setTimeout(function() {
$( ".dwlnd"+intref ).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<style>
.s-dwlnd { border: solid 1px #ccc; color:red;}
</style>
<!--use ref attribute as a target reference -->
<div class="dwlnd-trg" ref="1">click me! (1)</div>
<div class="dwlnd-trg" ref="2">click me! (2)</div>
<div class="dwlnd1">animate me! 1</div>
<div class="dwlnd2">animate me! 2</div>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</body>
</html>
If you can do it based on id it makes it a lot easier because you can't have multiple id's. But you can have multiple classes. Here is an example with id.
$(document).ready(function() {
$("#dwlnd-trg, #dwlnd-trg2, #dwlnd-trg3, #dwlnd-trg11, #dwlnd-trghahaha").click(function() {
//get the id of the trigger element that is clicked
var thisId = $(this).attr("id");
//get everything after "dwlnd-trg" form the id.
var idStripped = thisId.replace('dwlnd-trg','');
//Use the found id addition in the selector
$(".dwlnd" + idStripped).addClass("s-dwlnd");
setTimeout(function() {
$(".dwlnd" + idStripped).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
});
.s-dwlnd {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="dwlnd-trg">dwlnd-trg</button>
<button id="dwlnd-trg2">dwlnd-trg2</button>
<button id="dwlnd-trg3">dwlnd-trg3</button>
<button id="dwlnd-trg11">dwlnd-trg11</button>
<button id="dwlnd-trghahaha">dwlnd-trghahaha</button>
<div class="dwlnd">dwlnd</div>
<div class="dwlnd2">dwlnd2</div>
<div class="dwlnd3">dwlnd3</div>
<div class="dwlnd11">dwlnd11</div>
<div class="dwlndhahaha">dwlndhahaha</div>
To put multiple class, you to try something like :
$( ".dwlnd-trg, .dwlnd-trg2, .dwlnd-trg2" )
Good luck!
You can use a selector like this:
$('[class^="dwlnd-trg"]') //Select every element that has a class attribute starting with "dwlnd-trg".
or
$('[class˜="dwlnd-trg"]') //Select every element that has a class attribute containing "dwlnd-trg".
But beware the performance issue (since selecting from class is a much faster approach)
You can use attribute starts with selector:
$( '[class^="dwlnd-trg"]' ).click(function() {
var n = this.className.match(/\d+$/)[0] // grab the number
$( ".dwlnd" + n ).addClass( "s-dwlnd" );
setTimeout(function() {
$( ".dwlnd" + n ).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
});
First of all, you only need one $(document).ready. Just place all code in one block.
Second, you can create a function that takes the class of the selector as parameter.
Example:
$( document ).ready(function() {
// Put all handlers here
$( ".dwlnd-trg4" ).click(function() {
addclass(dwlnd4);
});
$( ".dwlnd-trg3" ).click(function() {
addclass(dwlnd3);
});
});
function addClass(class){
("." + class ).addClass( "s-dwlnd" );
setTimeout(function() {
$("." + class).removeClass("s-dwlnd");
}, 3000); // Delay of 3 seconds
}
But if you really want to best function, I would suggest adding a date-attribute to the html. And work with an e.target so you would know which element has been clicked. But maybe this refactor is too big for you. I could add an example of this if you are interested.
I'm trying to add a read more link in the paragraph containing rdm1 that contains the link of whatever h2 is linking to. My HTML and Javascript are below. I'm able to add read more. I'm not able to add the link of whatever h2 is. Any suggestions?
<div class="divgrey">
<h2>This is a heading.</h2>
<p>This is some text about the heading. </p>
<p class="rdm1"></p>
</div>
Code:
$(document).ready(function () {
$('.divgrey > p.rdm1').append('<a class="rdm">Read More</a>');
$('a.rdm').each(function () {
var lnk = $(this).parent().siblings('a').attr('href');
$(this).attr('href', lnk);
});
});
Try this:
$( document ).ready( function() {
$( '.rdm1' ).each( function() {
$( this ).append( 'Read More' );
});
});
I have a hidden div which will be shown on a button click and hide when i click every where else in page.
Now the problem is here:
Inside my div I have datepickers whenever I click on next/prev or select date,div slides up. How can I prevent that?
The code is here:
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$("#div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
Update:
jsfiddle added.
Please check my js fiddle
I have added date picker id #ui-datepicker-div" for stop propagation, and it's worked.
$(document).click(function(evt) {
if(evt.target.id!='btn' )
if($('#div').is(':visible')) {
$('#div').slideUp();
}
});
$( "#datepicker" ).datepicker();
$("#div, #ui-datepicker-div").click(function(e) {
e.stopPropagation();
return false;
});
$('#btn').click(function () {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
else{
//initialize controls
$('#div').slideDown();
}
});
you have to slideUp your required div if you click anywhere in your document body except your button 'btn', your div itself AND div children:
$(document).click(function(e) {
if ( e.target.id != 'btn' && e.target.id != 'div' && !$('#div').find(e.target).length) {
if($('#div').is(':visible')) {
$('#div').slideUp();
}
}
});
In your document.ready you made mistake in if block, I modified it as
if(evt.target.id!='btn' ){
if($('#div').is(':visible')) {
$('#div').slideDown();
}
}
Also try to avoid using id as 'btn' as it this id or class will make confusion if you use more css in your design
Here is another version of the same problem. Use some common class for those elements that wouldn't hide your div. Hope it will help you:
HTML :
<html>
<body>
<div id="container" style="display:none">
<input type="date" class="prevent-click">
</div>
<button onclick="display()" class="prevent-click">click</button>
</body>
</html>
JS :
var display = function () {
$("#container").toggle();
$("body").off("click").on("click", function (event) {
if ($(event.target).hasClass("prevent-click")) {
return;
}
$("#container").hide();
});
}
I have written a script that is supposed to render text (later a partial view) inside a div on click. I detect if div is visible or not and if not, I add text on click and make the div visible. This part works perfectly. When clicked and the div is visible I want to remove what has been added so that it wont multiply if I click it multiple times.
I get both alert - so detection of div visibility works but the text is not removed and it multiplies if I click it many times.
Here is my code - can you tell me what i am doing wrong?
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.append("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.next("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
You probably want to use .find() instead of .next() when removing.
Use .html() instead of .append()
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
Edit : - use .find() instead of .next() as render-object is child of content and not sibling
use .find instead of .next and use .html instead of .append
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
In a div with id #prlogo i have am image. I need to copy the filename or location of the image on the server to a text filed with id #input_2_16, when i hover over a button with id #button.
Sounds simple but i've been pulling my hair out trying to do this...
Div html:
<div id="prlogo" class="prlogo"><img class="logoplace" src="../preview/logo-place.png"/>
</div>
Miro
Without more context and using jQuery.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() { //this anonymous function will run when the page is ready
$("#button").hover(function() {
//mouse enter
var imgSrc = $("#prlogo img").attr("src");
//assumes there is an <img /> tag as a child of the #prlogo div
$("#input_2_16").val(imgSrc);
},function() {
//mouse leave
});
});
</script>
If you don't want to do anything on mouse leave you could instead do
$("#button").mouseenter(function() {
//mouse enter
var imgSrc = $("#prlogo img").attr("src");
//assumes there is an <img /> tag as a child of the #prlogo div
$("#input_2_16").val(imgSrc);
});
If I read this correctly, it would be something like this:
$( function () {
$( '#button' ).mouseover( function () {
var src = $( '#prlogo img' ).attr( 'src' );
$( '#input_2_16' ).val( src );
} );
} );
If you need to transverse more than one level down the DOM, use .find in place of .children.
$('#button').on('hover', function(){
$('#input_2_16').val($('#prlogo').children('img').attr('src'));
});