I am doing an increment and decrement of values by 1 on three categories. when ever the user updates the individual counts, total count should also be updated.
<div class="container">
<div>TotalCount: <span class="total-count">1</span></div>
<br/>
<div class="adult">
<div>Adult: <span class="adult-count">1</span></div>
<span class="plus">+</span>
<span class="minus disabled">-</span>
</div>
<div class="child">
<div>Child: <span class="child-count">1</span></div>
<span class="plus">+</span>
<span class="minus disabled">-</span>
</div>
<div class="infant">
<div>Infant: <span class="infant-count">1</span></div>
<span class="plus">+</span>
<span class="minus disabled">-</span>
</div>
Maximum total count should be 9. I am able to write the basic logic
fiddle link - https://jsfiddle.net/wgk970uv/
but the code gets complicated for the below requirements,
1. Maximum adult count can be 9
2. Maximum child count should be ( Maximum total count - adult count )
3. Maximum infant count should be same as adult count
could you please help me on this.
All you need to do is remove disabled from all the 3 whenever decrementing any of the categories adult/child/infant -
else if(adultCount<maxPeople){
$('.infant .plus').removeClass('disabled');
$('.child .plus').removeClass('disabled');
$('.adult .plus').removeClass('disabled');
}
The fiddle here.
Your logic could still be refined further to have a short and crisp code.
Related
I need the last node of a JSTree to present as list of individual buttons, horizontally after it. Each button has a different value that records a score for that last node's question. I can't figure out how to fire individual items click events inside the list item. The click event only fires for the entire node.
![screenshot gui design] https://i.ibb.co/FKwDNFz/Capture.jpg
Any Ideas on how i could accomplish this?
See attached image.
I have tried to add answer options as another subtree to question but that would display answers vertically and I need them to be horizontal to the right of the node.
I should be able to individual click the lettered buttons.
<ul class="question">
<li class="question jstree-open" data-jstree='{"icon":"fas fa-angle-right"}'>
<div class="row">
<div class="col-sm-8">
a. Points to hand that is hiding a toy (both when toy remains in that hand and when toy is transferred to the other hand, out of sight)
</div>
<div class="col-sm-4 text-right">
<input type="radio" id="asm-input" hidden="hidden" value="" />
+/-A
+A
+/-
+
-
</div>
</div>
</li>
</ul>
.
.
.
let links = [...document.body.querySelectorAll('a')];
links.map( link => {
link.addEventListener('click', event => {
let value = event.target.getAttribute('data-value');
console.log(value);
});
});
<ul class="question">
<li class="question jstree-open" data-jstree='{"icon":"fas fa-angle-right"}'>
<div class="row">
<div class="col-sm-8">
a. Points to hand that is hiding a toy (both when toy remains in that hand and when toy is transferred to the other hand, out of sight)
</div>
<div class="col-sm-4 text-right">
<input type="radio" id="asm-input" hidden="hidden" value="" />
<a id="ppp" href="#!" data-value="1" class="badge badge-pill badge-secondary asm-option align-middle">+/-A</a>
+A
+/-
+
-
</div>
</div>
</li>
</ul>
I'm working on a product box that has the products price, in-stock status, etc. The product box has multiple child elements within the parent element and within each child element, theirs a sub-child element that has a span element with text. I'm not sure what jquery code or javascript code I need to specify the condition that if this product box DOES NOT CONTAIN a product status within it, then add this NEW child element with text after the child element price container
So far I tried .has .find and :contains but they all select all product boxes that has those element/Id/class conditions and applies it even though i specify that only those without this existing text should have this new element with text applied.
General format of what I'm wroking with example:
<div class="product-box-container">
<h5 class="product-title">
<a class="product-name">This Watch Name</a>
</h5>
<p class="product-id">ABCD-123</p>
<div class="price-container">
<span class="product-price">$29.99</span>
<div class="availability-status">
<span class="product-status">In Stock</span>
</div>
<div class="view-product">
<a><span>View Product</span></a>
</div>
</div>
NOTE: I'm working with multiple product boxes within one page and a lot of them have the same class/Id names. I'm focusing on those without a product status and adding to them. Only way to differentiate them is by identifying the text within the product box container element and using that to apply specific conditions to certain boxes with particular text.
END RESULT
Product box with no product status before solution:
<div class="product-box-container">
<h5 class="product-title">
<a class="product-name">This Watch Name</a>
</h5>
<p class="product-id">ABCD-123</p>
<div class="price-container">
<span class="product-price">$29.99</span>
</div>
<div class="view-product">
<a><span>View Product</span></a>
</div>
</div>
Product box WITH added new child element:
<div class="product-box-container">
<h5 class="product-title">
<a class="product-name">This Watch Name</a>
</h5>
<p class="product-id">ABCD-123</p>
<div class="price-container">
<span class="product-price">$29.99</span>
</div>
<div class="availability-status">
<span class="product-status">Custom Order</span>
</div>
<div class="view-product">
<a><span>View Product</span></a>
</div>
</div>
#1 Method tried:
/*First i have to make sure it only applies this code to a web page that has view product button/class cause only the pages that have product boxes has view product button/class*/
if ($('span:contains("View Product")').length >0) {
/*trying to find specific product boxes that do not have product-status by
using its product-id text*/
if ($('div.product-box-container').has('p:contains("ABCD-123")').length >0){
$('div.price-container').after('<div class="availability-status"><span class="product-status">Custom Order</span></div>');
}
}
#2 Method tried
/*specifying to apply only to web pages with view product*/
if ($('span:contains("View Product")').length >0) {
/*applying the NEW child element first to everything*/
$('div.price-container').after('<div class="availability-status"><span class="product-status">Custom Order</span></div>');
/*then deleting the NEW child element from any product boxes that has the In
Stock text within it*/
if ($('div.product-box-container').has('span:contains("In Stock")').length >0) {
$('div.availability-status').css('display','none');
}
}
Find all the boxes
Filter out the ones that do have an availability-status
Find the view-product nested in the remaining boxes
Insert the custom html before the view product
$('.product-box-container')
.filter(function(){
return $(this).find('.availability-status').length < 1;
})
.find('.view-product')
.before(`
<div class="availability-status">
<span class="product-status">Custom Order</span>
</div>
`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-box-container">
<h5 class="product-title">
<a class="product-name">This Watch Name</a>
</h5>
<p class="product-id">ABCD-123</p>
<div class="price-container">
<span class="product-price">$29.99</span>
</div>
<div class="view-product">
<a><span>View Product</span></a>
</div>
</div>
<div class="product-box-container">
<h5 class="product-title">
<a class="product-name">This Watch Name</a>
</h5>
<p class="product-id">ABCD-123</p>
<div class="price-container">
<span class="product-price">$29.99</span>
</div>
<div class="availability-status">
<span class="product-status">In Stock</span>
</div>
<div class="view-product">
<a><span>View Product</span></a>
</div>
</div>
I am trying to use jquery clone() for displaying cards on my web page. When the page loads it has to clone card div based on the count of rooms in that particular location. I hardcoded count as roomcount. I tried using simple for loop as per https://stackoverflow.com/a/12835644/6915446, However it doubles the count of divs each time. Please provide me right inputs.
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-2">
<div class="card">
<h6 class="card-header">NC001
<ul class="card-header-pills pull-xs-right">
<span class="badge badge-primary" aria-hidden="true">2</span>
<!-- <span class="glyphicon glyphicon-user" aria-hidden="true"></span> -->
</ul>
</h6>
<div class="card-block" id="scrollCard">
<h4 class="card-title"></h4>
<!-- <p class="card-text">ICU : 12.00 AM</p>
<p class="card-text">VEN : 1.00 AM</p> -->
</div>
</div>
<script>
var roomcount = 3;
$(document).ready(function() {
for(var i=0; i< roomcount; i++) {
$(".col-lg-2").clone().appendTo(".row-fluid");
}
});
</script>
</div>
Thanks.
When the count is 2, it clones to display 4 divs:
When the count is 3, it clones to displays 8 divs:
I think you might be cloning an array?
After you have cloned
$(".col-lg-2")
once it becomes an array, so when you clone it again you get 4?
Try using
$(".col-lg-2:first").
Tom
When you select an element by it's class name, jquery returns an array of all the matching objects.
So once you've cloned an item with the same class name, the next time you call $(".col-lg-2"); it will actually fetch 2 items and clone them, and the next time it will fetch 4 items and clone them etc.
To avoid it (and as a best practice) you should cache the element you are cloning:
var roomcount = 3,
$cloned = $('.col-lg-2');
for(var i = 0; i < roomcount; i++) {
$cloned.clone().appendTo('.row-fluid');
}
that way you always clone just that one object you cached.
NOTE: make sure you don't have an id on the cloned object since you'll be creating multiple items with the same id and id should be unique
The clone() method makes a copy of selected elements, including child nodes, text and attributes.
You can save the value of $(".col-lg-2") in a variable, and clone it, these way you are improving performance as you are not going to query the DOM multiple times:
var roomcount = 3,
$colLg2 = $('.col-lg-2');
for(var i = 0; i < roomcount; i++) {
$colLg2.clone().appendTo('.row-fluid');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-fluid">
<div class="col-lg-2">
<div class="card">
<h6 class="card-header">NC001
<ul class="card-header-pills pull-xs-right">
<span class="badge badge-primary" aria-hidden="true">2</span>
<!-- <span class="glyphicon glyphicon-user" aria-hidden="true"></span> -->
</ul>
</h6>
<div class="card-block" id="scrollCard">
<h4 class="card-title"></h4>
<!-- <p class="card-text">ICU : 12.00 AM</p>
<p class="card-text">VEN : 1.00 AM</p> -->
</div>
</div>
</div>
</div>
I have this bit of HTML code.
<div class="container">
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">35000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2101</span>
<span class="cabin">Economy</span>
<span class="price">40000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">22000</span>
</div>
<div class="single-result">
<span class="flight-no">VL2100</span>
<span class="cabin">Economy</span>
<span class="price">14500</span>
</div>
</div>
How do I sort it -- based on price -- using Javascript? Please, don't ask me for my JS code. My only thought was to use the bubble sort algorithm. But then, bubble sort works only on sorted arrays and my HTML string isn't sorted. Any suggestions, pointers and / or code will be appreciated.
Create an array and insert for each element 2 fields, the HTML element and the price, sort the array, re-insert the elements after sorting to conainer after make it empty:
var elements = document.querySelectorAll('.single-result');
var sortable = [];
for (i=0;i<elements.length;i++){
sortable.push([elements[i], elements[i].querySelector('.price').textContent]);
}
sortable.sort(function(a, b) {return a[1] - b[1]});
container = document.querySelector('.container');
container.innerHTML = "";
sortable.forEach(function(item) {
container.appendChild(item[0]);
});
I have 2 price range. Regular Price and Offer Price displayed on screen with the below HTML rendered.
I am trying to calculate the price difference using Javascript/jquery and insert a div with the discount price.
<div class="price-box">
<p class="old-price">
<span class="price-label">Regular Price:</span>
<span class="price" id="old-price-221">Rs17.00 </span>
</p>
<p class="special-price">
<span class="price-label">Special Price</span>
<span class="price" id="product-price-221">Rs14.45 </span>
</p>
<div>
<span>Discount Price:</span>
<span>XXXXXX</span>
</div>
</div>
I have this currency symbol also displayed along with the price. So, I am wondering how to calculate the difference between "Regular Price" and "Special Price".
Can some one please help me?
P.S. I searched the site and did not find the relevant answers.
There it is : http://jsfiddle.net/s7w98ngt/2/
jQuery part :
$('.price-box').each(function(){
var element = $(this),
oldPriceRaw = element.find('.old-price .price').text(),
specialPriceRaw = element.find('.special-price .price').text(),
oldPrice = parseFloat(oldPriceRaw.replace('Rs','')),
specialPrice = parseFloat(specialPriceRaw.replace('Rs','')),
diff = 'Rs'+(oldPrice - specialPrice).toFixed(2), // 2 numbers after the comma
diffElement = element.find('.diff-price');
diffElement.text(diff);
});
HTML a bit modified :
<div class="price-box">
<p class="old-price">
<span class="price-label">Regular Price:</span>
<span class="price" id="old-price-221">Rs17.00 </span>
</p>
<p class="special-price">
<span class="price-label">Special Price</span>
<span class="price" id="product-price-221">Rs14.45 </span>
</p>
<div>
<span>Discount Price:</span>
<span class="diff-price"></span>
</div>
</div>
The tricky thing was to get the current prices value as float numbers. Then, we just calcul the difference.