there is an example
<button id="tri" style='display: block;'>add</button>
<div id="box" style='display: none;' >
tracked by id
$('#tri').on('click', function(){
var e = document.getElementById('box');
var b = document.getElementById('tri');
if(e.style.display == 'none')
$("#box").slideDown();
b.style.display = 'none';
})
need to do the same so that this button tracks but only class and data-id
<div class="block_view" data-id="52" style='display: none; ></div>
what i tried did not work
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" style="display: none;" data-id="51"></div>
<script>
$('body').on('click', '.editblock', function() {
var $this = $(this),
id = $this.attr('data-id');
var b = $('.block_view[data-id=id]');
if(b.style.display == 'none')
b.style.display = 'block';
})
</script>
what am I doing wrong?
The variable id contains dynamic data but you are using that as a string, you should form the selector in a proper way.
b refers to a jQuery element, you should use .css() instead of style property.
Try the following way:
$('body').on('click', '.editblock', function() {
var $this = $(this),
id = $this.attr('data-id');
var b = $('.block_view[data-id='+id+']');
if(b.css('display') == 'none')
b.css('display', 'block');
else b.css('display', 'none');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="editblock" data-id="51">edit</button>
<div class="block_view" data-id="51" style='display: none;' >block_view</div>
You have to insert the id variable in to selector, you are just putting the literal sting id in it. Also jQuery returns a jQuery object not an element, so you can use document.querySelector instead.
var b = document.querySelector('.block_view[data-id="'+id+'"]');
You can take data-id using $(this).data('id'); and the style by $(this).css("display"). you can find all div with the data-id and show/hide based on that
$(".editblock").click(function() {
var id=$(this).data('id');
console.log(id)
var styles = $(this).css("display");
console.log(styles)
$("div").each(function(){
if($(this).attr('id') == id && $(this).css("display")=="none") {
$(this).css('display','block');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" >
<div id="51" style="display:none">div1</div>
<div id="52" style="display:none">div2</div>
<div id="53" style="display:none">div3</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button class="editblock" data-id="51">edit</button>
<div class="block_edit" style="display: none;" data-id="51"></div>
<div class="block_view" data-id="51" style='display: none;'>Demo</div>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$('.editblock').click(function(){
var id = $(this).attr('data-id');
var b = $('.block_view[data-id='+id+']');
if($(b).css('display')=='none'){
$(b).css('display','block')
}
});
</script>
</html>
Related
var temp = $('#temp');
$('button').on('click', function(){
temp.html($('#wrap').html());
temp('.elmark').removeClass('elact'); // error
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div id='wrap'>
<div class='elmark elact'>R</div>
</div>
<div id='temp'></div>
how to access '.elmark' inside temp using temp?
var temp = $('#temp');
$('button').on('click', function(){
temp.html($('#wrap').html());
temp.find('.elmark').removeClass('elact');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div id='wrap'>
<div class='elmark elact'>R</div>
</div>
<div id='temp'></div>
You can use the second argument of the jQuery selector $() to specify the context. This way you'll find all elements which match the selector which are descendants of temp (ie the context):
var temp = $('#temp');
$('button').on('click', function() {
temp.html($('#wrap').html());
$('.elmark', temp).removeClass('elact');
});
.elact {
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div id='wrap'>
<div class='elmark elact'>R</div>
</div>
<div id='temp'></div>
I'm very new to JQuery.
I already can, get the data from textbox and do some calculation and show it to other 'textbox' though I want to post it to 'div' or 'p' whatever it is as long as not textbox.
here's my code
<div id="result" style="display:none;">
<div class="col-sm-5 text-right"><label>Participant fee (IDR):</label></div>
<div class="col-sm-7"id="parcost" ></div>
<div class="col-sm-5 text-right"><label>Populi fee (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="popcost"></div>
<div class="col-sm-5 text-right"><label>Total Estimated Cost (IDR):</label></div>
<div class="col-sm-7"><input type="text" id="totcost"></div>
</div>
$(document).ready(function(){
$('#calc').click(function(){
var num_participant = parseInt($("num_participant").val());
var reward = parseInt($("reward").val());
var esttime = parseInt($("esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
/*
document.getElementById("result").style.display = "block";
document.getElementById("parcost").value = parcost;
document.getElementById("popcost").value = popcost;
document.getElementById("totcost").value = totcost;*/
document.getElementById("result").style.display = "block";
$("#parcost").html(parcost);
$("#popcost").html(popcost);
$("#totcost").html(totcost);
return false;
});
});
Still wont work, if I change it from "document.getelementById" to "$".
and even using "document.getelementById" it won't showed on the "div".
any ideas?
I'm not sure if you're asking this but try something like this,
var totCost = document.getElementById("totcost").value;
$("#yourDivID").html(totCost);
I'm not sure what you are asking about but if you want to send the result to a div, just use $("#divId").html(result)
I think that you must use .text or .html in place .value.
look at this example using jquery:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>text demo</title>
<style>
p {
color: blue;
margin: 8px;
}
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p><b>Test</b> Paragraph.</p>
<p></p>
<script>
var str = $( "p:first" ).text();
$( "p:last" ).html( str );
</script>
</body>
</html>
If you wish to add a result in a div try with:
jQuery("#divID").append("<p>" + data + "<p>");
To update the content of a <div> or <p> element, you would use innerHTML instead of value.
So in your sample code you would update this line:
document.getElementById("parcost").value = parcost;
into this:
document.getElementById("parcost").innerHTML= parcost;
Furthemore, since you are already using jQuery, you can simplify your click function:
$('#calc').click(function(){
var num_participant = parseInt($("#num_participant").val());
var reward = parseInt($("#reward").val());
var esttime = parseInt($("#esttime").val());
var parcost = num_participant*reward;
var popcost = (parcost*0.1)+(num_participant*150);
var totcost = parcost+popcost;
$("#result").css("display", "block");
$("#parcost").html(parcost);
$("#popcost").val(popcost);
$("#totcost").val(totcost);
});
I want to add a class to body in HTML using Javascript using a button that executes a function, then remove it using another button. But I want to save that class, until the other button is pressed, using LocalStorage.
I can do that without LocalStorage
$$('body').addClass('Class here');
But how with LocalStorage?
By using Storage.setItem to save, then Storage.getItem to retrieve, like this:
var className = "theclass";
// Put the class name into storage
localStorage.setItem('className', className);
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
$('body').addClass(retrievedClassName);
Here a working code with jquery:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body class="">
<div class="form-group">
<button class="button">your button</button>
</div>
<script>
var className = "theclass";
jQuery('.button').on( 'click', function(){
localStorage.setItem('className', className);
jQuery('body').addClass(className);
});
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
jQuery('body').addClass(retrievedClassName);
</script>
</body>
</html>
And here without:
<html>
<head></head>
<body id="mybigbody" class="">
<div class="form-group">
<button id="button">your button</button>
</div>
<script>
var className = "theclass";
var body = document.getElementById("mybigbody");
document.getElementById('button').onclick = function(e) {
localStorage.setItem('className', className);
body.setAttribute("class", className);
e.stopPropagation();
}
// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');
if(retrievedClassName)
body.setAttribute("class", retrievedClassName);
</script>
</body>
</html>
var $selected = $();
var $itemLv1 = $("#create-summary .lv1");
$itemLv1.click(function(){
$selected = $(this);
$(this).toggleClass('clicked').siblings().removeClass('clicked');
});
$("#moveUp").click(function(){
$selected.add($selected.nextUntil(":not(.lv2)"))
.insertBefore($selected.prevAll(".lv1:first"));
});
$("#moveDown").click(function(){
$selected.add($selected.nextUntil(":not(.lv2"))
.insertAfter($selected.nextAll(".lv1:first"));
});
.clicked{
color: red;
font-weight:700;
}
.lv2, .lv3 {
margin-left:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="create-summary">
<div class="lv1"> Introduction</div>
<div class="lv1">1. AAA</div>
<div class="lv1">2. BBB</div>
<div class="lv1">3. CCC
<div class="lv2">3.1 aaa</div>
<div class="lv2">3.2 bbb</div>
<div class="lv2">3.3 ccc</div>
<div class="lv2">3.4 ddd
<div class="lv3">3.4.1 xxxxx</div>
<div class="lv3">3.4.2 yyyyy</div>
<div class="lv3">3.4.3 zzzzz</div>
</div>
</div>
<div class="lv1">4. DDD</div>
<div class="lv1">5. EEE</div>
</div>
<button type="button" id="moveUp">Up </button> /
<button type="button" id="moveDown">Down</button>
Now, I can move up or down for lv1 element with its child element.
However, how to only move an div element inside the child div?(only in lv3 or lv4 even lv5 or lv6)
Fir example, I want to move "ccc" up only in lv2 or move xxxxx only in lv3.
Is there any way can do that?
I assume that you want a functionality like this,
var $selected = $();
var $itemLv1 = $("#create-summary [class^=lv]");
$itemLv1.click(function (e) {
$selected = $(this);
var x = $(this).toggleClass('clicked');
$("[class^=lv]").not(x).removeClass("clicked child").addClass("child");
x.siblings().removeClass('clicked');
e.stopPropagation();
});
$("#moveUp").click(function () {
$selected.insertBefore($selected.prev("[class^=lv]"));
});
$("#moveDown").click(function () {
$selected.insertAfter($selected.next("[class^=lv]"));
});
DEMO
I am completely lost here.
I am trying to have a visibility toggle for called multiple elements with consecutively numbered IDs. The Class is already used for another function. I want the script to run a loop to get all elements that have the set ID and consecutive number to toggle visibility.
this is the code I have.
<div>
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" />
<label for="angels"><span>Hide Angels</span>
</label>
</div>
<div id="angelT1" style="display:block">angel1</div>
<div id="angelT2" style="display:block">angel2</div>
<div id="angelT3" style="display:block">angel3</div>
<div id="angelT4" style="display:block">angel4</div>
<div id="angelT5" style="display:block">angel5</div>
<div id="angelT6" style="display:block">angel6</div>
And this is the script.
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
Try this:
function toggle_visibility(prefix) {
var i = 0;
var e = null;
do {
++i;
var id = prefix + i;
e = document.getElementById(id);
if (e)
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
} while (e);
}
Example: http://codepen.io/paulroub/pen/lhHby
The id selector is very specific, and none of the ids on your elements will match. You may be better off using a common class to accomplish this:
<div>
<input type="checkbox" name="tag" id="angels" onclick="toggle_visibility('angelT');" />
<label for="angels"><span>Hide Angels</span>
</label>
</div>
<div id="angelT1" class="angelT" style="display:block">angel1</div>
<div id="angelT2" class="angelT" style="display:block">angel2</div>
<div id="angelT3" class="angelT" style="display:block">angel3</div>
<div id="angelT4" class="angelT" style="display:block">angel4</div>
<div id="angelT5" class="angelT" style="display:block">angel5</div>
<div id="angelT6" class="angelT" style="display:block">angel6</div>
<script type="text/javascript">
function toggle_visibility(className) {
var e = document.getElementsByClassName(className);
for (var i = 0; i < e.length; i++) {
if (e[i].style.display == 'block') e[i].style.display = 'none';
else e[i].style.display = 'block';
}
}
</script>
I believe that using jquery now solve this way
$( "div[id^='"+id+"']" ).toogle();
https://api.jquery.com/attribute-starts-with-selector/
http://api.jquery.com/toggle/