Replace from <span class="redbadge"> the text No with Yes if div contains the text I am now visible.
HTML
<div class="visibleonsearch">
<span class="redbadge">No</span>
I am now visible.
</div>
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
$(".visibleonsearch").text(function () {
return $(this).text().replace("No", "Yes");
});
</script>
I am not familiar with jQuery to add the condition if.
You can try using :contains selector like the following way:
jQuery(document).ready(function () {
if($(".visibleonsearch:contains(I am now visible)").length){
var span = $('.visibleonsearch').find('.redbadge');
span.text(span.text().replace("No", "Yes"));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="visibleonsearch">
<span class="redbadge">No</span>
I am now visible.
</div>
If the goal is to change the text of the span while leaving the span itself in the DOM then you can use :contains to find the relevant .redbadge element, like this:
$('.visibleonsearch:contains("I am now visible") .redbadge').text('Yes');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="visibleonsearch">
<span class="redbadge">No</span> I am now visible.
</div>
try this code
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".visibleonsearch:contains(I am now visible.)").find(".redbadge").text(function () {
return $(this).text().replace("No", "Yes");
});
});
</script>
</head>
<body>
<div class="visibleonsearch">
<span class="redbadge">No</span>
I am now visible.
</div>
</body>
</html>
Related
Anyone know how to copy the text of one div into another?
My situation is that I want to make a textbox that can have information typed into it and then show up in a div.
this is my code:
$("#title").text() = $("#t").text();
"#t" is my textbox and "#title" is the div.
The answer can be in javascript or jquery I don't mind. However I'd prefer jquery.
You can easily done it like this by handling 'onkeyup' event of the input text.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<input type="text" id="txt1"/>
</div>
<div>
<p id="typed-result"></p>
</div>
<script>
$(document).ready(function(){
$('#txt1').on('keyup',function(){
var result = $(this).val();
$('#typed-result').text(result);
});
});
</script>
</body>
</html>
You could try the following:
$("#title").text($("#t").val());
$(function(){
$("#copyBtn").on("click", function(){
$("#first").text($("#txtBox").val());
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">This is the div.</div>
<input type="text" placeholder="enter value" id="txtBox"/>
<input type="button" value="Copy text box value to div" id="copyBtn"/>
You can do this with
$('#getDiv').text($(this).val());
Try with this working example , just type something in textarea
$(function(){
$('#getText').on('keyup', function() {
$('#getDiv').text($(this).val());
})
});
<textarea id="getText"></textarea>
<div id="getDiv"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
You can use the keyup JavaScript event, Something like this -
HTML -
<body>
<input type='text' id='one'>
<div id='two'></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
jQuery -
$(document).ready(function() {
$('#one').on('keyup', function() {
$('#two').text($(this).val());
})
})
You can use this
$("#t").keyup(function(){
$("#title").text($("#t").value());
}
$('#txtArea').keyup(function(event) {
event.preventDefault();
$('.txt-block').text($("#txtArea").val());
// #txtArea is ur textarea box where you type text.
// .txt-block is your div where textarea Text shows.
});
I Just can't find the answer to this.
I have a div in my webpage, above on a different layer. I simply want to have a button or tag inside this div which will hide it. I have tried:
<html>
<head>
<script language="javascript">
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
Could someone please show me where I have gone wrong.
Do this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
This is just because you didn't define myFunction() as a function .
Next time, open your debugger with F12, and see what it is saying... !
You missed out declaring your function at the beginning
myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should declare using the keyword function.
function myFunction()
{
document.getElementById("corporate_background").setAttribute("style", "display:none;");
}
You should probably use an event listener on your anchor also instead of using inline javascript. No harm just best practice.
Try this:
<html>
<head>
<script language="javascript">
function myFunction()
{
document.getElementById("corporate_background").style.display='none';
}
</script>
</head>
<body>
<p>aajhahaksha</p>
<div id="corporate_background">
Close
<P>content...</P>
</div>
</body>
</html>
I think what you wanna do is hide the content, so you can hide content like this,
Make the button ;
<button id="btn" name="button">Hide content</button>
By clicking the button it wil hide the div corporate_background
<script>
$(document).ready(function () {
$('#btn').click(function () {
$('#corporate_background').hide();
});
});
</script>
I'm new to JQuery and I would want like to know how to apply the .toggle() method only in clicked DIV instead of the all DIVs of the page.
Can anyone help me?
PS: I need implement in the JQuery version 1.4
This is my code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="card.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#toggle2').live("click", function() {
$('.toggle2').toggle();
return false;
});
});
</script>
</head>
<body>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 1</p>
<p class="toggle2" style="display:none;">BACK 1</p>
</div>
<div class="card">
Switch Text Toggle<br />
<p class="toggle2">FRONT 2</p>
<p class="toggle2" style="display:none;">BACK 2</p>
</div>
</body>
Thanks in advance!
$(function() {
$('#toggle2').live("click", function() {
$(this).parent().find('.toggle2').toggle();
return false;
});
});
ID's are unique, and this will probably only work on the first occurence of #toggle, so you'll need to use classes there as well.
FIDDLE
Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?
It takes a simple javascript to do this
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeContent()
{
document.getElementById("myDiv").innerHTML='New Content';
}
</SCRIPT>
</HEAD>
<BODY>
<div id="myDiv">
Old Content
</div>
Change Div Content
</BODY>
</HTML>
Here an small example with jquery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pass").hover(
function () {
$(".change").text("MOUSE HOVER");
},
function () {
$(".change").text("DIV TO CHANGE");
}
);
});
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>
You could use a Javascript library like JQuery
for example:
$('#youranchorid').mouseover(function() {
$('#yourdivid').html("Your new text");
});
check the API
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>