I'm using JavaScript to change the price value of the div based on the selected div, the price is already defined in the div, if I click on any div it should updated the value in the another div as well. so far I have try below code but it doesn't work, it changes the value of only first div. if I click on another div it repeats the same price value.
Here's the code I have tried so far!
let pricebox = document.getElementById('pricingdata');
const totalprice = document.querySelector("#totalprice");
pricebox.addEventListener('click', function(e) {
let mainprice = document.getElementById("pricecad").innerHTML;
console.log(mainprice);
totalprice.innerHTML = '$' + mainprice;
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5" id="pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
This code should work. Click Run code snippet and check the result.
const totalprice = document.querySelector("#totalprice");
const priceboxes = document.querySelectorAll('.pricing-box-cad');
for (var i = 0; i < priceboxes.length; i++) {
priceboxes[i].onclick = (e) => {
const mainprice = e.currentTarget.querySelector('.pricecad').innerText;
totalprice.innerText = '$' + mainprice;
}
}
<div class="row text-center pricing-box">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<span>$</span><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
remove all id="pricecad" as polyglot wrote, ids must be unique
you are looking for event delegation, replace your code by:
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
if (!e.target.matches('span.display-5')) return // ignore clicks else where
totalprice.textContent = '$' + e.target.textContent;
});
for click on every .pricing-box-cad' elements do
const pricebox = document.getElementById('pricingdata')
, totalprice = document.querySelector("#totalprice")
;
pricebox.addEventListener('click', function (e)
{
let pricingBox = e.target
while (!pricingBox.matches('div.pricing-box-cad'))
{
if (!pricingBox.parentElement) break
pricingBox = pricingBox.parentElement
}
if (!pricingBox.matches('div.pricing-box-cad')) return // ignore clicks else where
totalprice.textContent = '$' + pricingBox.querySelector('span.display-5').textContent
});
Again using bubbling/delgation, this method uses closest to find the ".pricing-box-cad" ancestor of the element clicked then gets the element with the price. Note the duplicate IDs have been moved to class.
Also note if you need to support IE (for a start I'm sorry about that!) you will need to use a pollyfill (mentioned in the link above).
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Find closest pricing box ancestor
let priceBox = e.target.closest(".pricing-box-cad")
if(priceBox) {
let price = priceBox.querySelector(".pricecad").innerText;
//console.log(price)
totalprice.textContent = "$" + price;
}
//Alert if clicked outside a pricing box
else {alert("clicked outside area") }
});
<div class="row text-center pricing-box" id="pricingdata">
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
<div class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</div>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice">$30</strong></div>
</div>
Now just for fun, I wanted to see how much I could do in CSS alone with minimal JS. So I came up with the below. This is for demonstration purposes only and is really just to show what you can achieve with minimal JS.
let pricingData = document.getElementById("pricingdata");
const totalprice = document.querySelector("#totalprice");
//Set even listener on parent box
pricingData.addEventListener("click", function(e) {
//Get value from radio button
let value = this.querySelector("[name=price]:checked").value;
//UPdate Attribute on price CSS will take care of the rest
totalprice.dataset.total = "$" + value;
});
#pricingdata label {
display:block;
}
#pricingdata :checked + label {
background-color:#CCC;
}
#pricingdata input[type=radio] {
display:none;
}
#totalprice:before {
content : attr(data-total)
}
<div class="row text-center pricing-box" id="pricingdata">
<input type="radio" value="30" id="rdoPrice1" name="price">
<label for="rdoPrice1" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data1</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="31" id="rdoPrice2" name="price">
<label for="rdoPrice2" class="col mx-auto pricing-box-cad align-self-center">
<div class="card active-plan mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data2</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">31</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice3" name="price">
<label for="rdoPrice3" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data3</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="30" id="rdoPrice4" name="price">
<label for="rdoPrice4" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname">Data4</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">30</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
<input type="radio" value="69" id="rdoPrice5" name="price" checked>
<label for="rdoPrice5" class="col mx-auto pricing-box-cad align-self-center">
<div class="card mb-4">
<div class="card-body p-3 text-center">
<h5 class="prdname red-tooltip">All</h5>
<div class="mt-3 value-price">
<sup>$</sup><span class="display-5 pricecad">69</span>
</div>
<h6 class="mt-3 interval">YEARLY</h6>
</div>
</div>
</label>
</div>
<div class="col-7">
<div class="cad-price prd-priceval">Total Price:<strong id="totalprice" data-total="$69"></strong></div>
</div>
Related
I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.
My web-app is about forecasting on sports games.
My page shows all the matches and the points you can get out of each outcome from a match (Madrid = 12 points VS Barcelone = 15 points).
So a user check a box from a match and select for him the right outcome.
I would like each time the user check a box, to show him the number of boxes he checked.
Here is my Javascript to count the box checked :
const updateCount = function() {
var x = document.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML = x;
};
Here is the HTML where the number of box checked will be displayed
<div class=" d-flex pt-2">
<h3 class="typos">Matchs pronostiqués</h3>
<h3 class="typos pts" style="font-weight: bold; padding-left: 5px;"><%= current_user.forecasts.where(confirmed: true, season_id: Season.last.id).count %>/50</h3>
<span class="plus"></span>
</div>
Here is my Javascript in order to know which game the user forecasted and which outcome he selected :
const selectOutcome = () => {
const selects = document.querySelectorAll(".square");
selects.forEach((outcome)=>{
outcome.addEventListener("click",(event) => {
$('input[type="checkbox"]').on('change', function() {
$(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});
const result = event.currentTarget.dataset.outcome;
console.log(result);
const id = event.currentTarget.parentNode.dataset.id;
console.log(id);
const box = event.currentTarget.checked;
console.log(box);
const url = 'store_outcome?result='+result+'&match='+id+'&box='+box
fetch(url)
.then(response => response.json())
.then((data) => {
console.log(data);
});
});
});
}
const validePanier = () => {
const panier = document.getElementById('panier');
panier.addEventListener("click", (event) =>{
console.log("click")
const player = document.getElementById('season_player').value;
fetch('confirm_pending?player='+player)
.then(response => response.json())
.then((data) => {
console.log(data);
});
})
}
Here is my HTML, for each match I have in my database, a match is going to appear in front in this way.
<% #matches.each do |match| %>
<% if Time.parse(match.kick_off) > Time.now && current_user.forecasts.find_by(match_id: match.id, confirmed: true).nil? && match.points_home.present? %>
<% if match.sport == "football" %>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo"><%= match.league %></h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit"><%= DateTime.parse(match.kick_off).to_date%></h3><h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2"><%= match.kick_off.to_s.gsub("T", " ").split[1].gsub("+", " ").split[0]%></h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="<%= match.id %>">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo"><%= image_tag "#{match.team_home_logo_url}", width: 50 %></h3>
</div>
<div class="row text-align-center">
<h3 class="tit"><%= match.team_home %></h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="<%= match.id %>">
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="1"></input>
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="NULL"></input>
<input type="checkbox" class="square" onclick="updateCount()" data-outcome="2"></input>
</div>
</div>
</div>
There is a data-id. The purpose is when a user check a box, I can get the id of the match, in order to create the right forecast for the right game.
I would delegate instead of having inline event handlers
Here I COUNT the checkboxes - why do you not want the VALUE of a checked RADIO?
Note I wrapped all matches in <div id="matches">...</div>
document.getElementById("matches").addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("square")) {
const parent = tgt.closest(".displaysquares");
var x = parent.querySelectorAll(".square:checked").length;
document.querySelector(".plus").innerHTML += parent.dataset.id + ": " + x +"<br/>" ;
}
})
<span class="plus"></span>
<div id="matches">
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 1</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 1">
<input type="checkbox" class="square" data-outcome="1">
<input type="checkbox" class="square" data-outcome="NULL">
<input type="checkbox" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 2</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 2">
<input type="checkbox" class="square" data-outcome="1">
<input type="checkbox" class="square" data-outcome="NULL">
<input type="checkbox" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
</div>
Using Radios instead
const matches = document.getElementById("matches")
matches.addEventListener("change", function(e) {
const tgt = e.target;
if (tgt.classList.contains("square")) {
var x = [...matches.querySelectorAll(".square:checked")].map(chk => chk.closest(".displaysquares").dataset.id + ": "+chk.dataset.outcome)
document.querySelector(".plus").innerHTML = x.join("<br/>");
}
})
<span class="plus"></span>
<div id="matches">
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 1</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 1">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 1">
<input type="radio" name="outcome1" class="square" data-outcome="1">
<input type="radio" name="outcome1" class="square" data-outcome="NULL">
<input type="radio" name="outcome1" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h4 class="typopo">League 2</h4>
</div>
<div class="d-flex justify-content-center mb-2 mt-2">
<h3 class="tit">
Some date
</h3>
<h3 class="typopo pl-2">-</h3>
<h3 class="typopo pl-2">Some string</h3>
</div>
<div class="d-flex flex-row justify-content-around mb-4 mt-4" data-id="MATCH 2">
<div class="d-flex flex-column align-items-center col-4">
<div class="row">
<h3 class="typopo">TEAM LOGO </h3>
</div>
<div class="row text-align-center">
<h3 class="tit">Some other team string</h3>
</div>
</div>
<div class="d-flex flex-column justify-content-center">
<p class="typopo text-center">VS</p>
<div class="d-flex flex-row align-items-center col-4">
<div class="displaysquares" data-id="MATCH 2">
<input type="radio" name="outcome2" class="square" data-outcome="1">
<input type="radio" name="outcome2" class="square" data-outcome="NULL">
<input type="radio" name="outcome2" class="square" data-outcome="2">
</div>
</div>
</div>
</div>
</div>
So i am really confused on this one.
As you can see in developer tools on mobile everything looks fine with the layout but when i deploy a live version the stars overlap. I firstly thought this could be a safari based issue or device issue of some sort. But it is the same in chrome and on any mobile device. On desktops it is fine. I thought this could also be how the stars are being dynamically loaded onto the page so i changed the positioning of the script tags to place them at the end of the body but to still no avail.
Here is the output once live
MARKUP:
#* Brands *#
<section class="container container12 mb-5" id="indexBrands">
<div class="row">
<div class="col-12 text-center my-3">
<p class="h2">Featured Brands</p>
</div>
</div>
<div class="row p-xs-2">
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="/info/korniche"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/korniche.jpg" alt="Korniche flat glass lanterns" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Sleek and elegant glass roof lanterns ideal for elevating your flat roof extensions.</p>
</div>
<div class="col d-flex justify-content-center align-items-end">
<div class="korniche-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/korniche" id="signaturetCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/eco-plus-flat-roof-lights"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/eco-plus.jpg" alt="ECO+ Flat Glass Rooflights" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Eco friendly pitched and flat roof windows designed for adding natural light with minimum fuss.</p>
</div>
<div class="col d-flex justify-content-center align-items-end">
<div class="eco-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/eco-plus-flat-roof-lights" id="ecoCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down-->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/signature"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/signature.jpg" alt="Signature rooflights" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Fully certified, UK-manufactured rooflights. The number one choice for bespoke flat roof glazing solutions.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="signature-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/signature" id="signaturetCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-sm-block"></div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/velux"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/velux.jpg" alt="VELUX Pitched and flat roof windows" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">World renowned pitched roof windows built for creating a brighter and healthier indoor climate.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="velux-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/velux" id="veluxCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/rooflite"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/rooflite.jpg" alt="Rooflight roof windows" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Pitched roof windows guaranteed to brighten up your loft conversion without breaking the bank.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="rooflight-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/rooflite" id="rooflightCount"></a>
</div>
</div>
</div>
<!-- Force next columns to break to new line at xs breakpoint and down -->
<div class="w-100 d-none d-block d-sm-none"></div>
<div class="col m-2 d-flex justify-content-center" style="border:1px solid black">
<div class="row flex-column h-100 d-flex justify-content-center align-items-center">
<div class="col">
<a class="d-flex justify-content-center" href="~/info/lightway"><img class="img-fluid m-2 p-1" data-src="#Model.BaseUrl/filestore/pageimages/Sterlingbuild-homepage/brands/area/lightway.jpg" alt="Lightway sun tunnels" /></a>
</div>
<div class="col">
<p class="text-center lowerText p-1">Precision engineered Crystal sun tunnels perfect for introducing daylight into the darker areas of a property.</p>
</div>
<div class="col col d-flex justify-content-center align-items-end">
<div class="lightway-rating text-center mb-3"></div>
<a class="align-self-center mb-3 ml-2" href="/info/lightway" id="lightwayCount"></a>
</div>
</div>
</div>
</div>
</section>
<script src="~/Content/JS/getStarRating.js"></script>
<script src="~/Content/JS/insertStars.js"></script>
getStarRating.js:
$(document).ready(function () {
$.get("/api/feefo/132",
function (data) {
kornicheRating(data.Rating);
});
$.get("/api/feefo/10",
function (data) {
ecoRating(data.Rating);
});
$.get("/api/feefo/108",
function (data) {
signatureRating(4.0);
});
$.get("/api/feefo/7",
function (data) {
veluxRating(data.Rating);
});
$.get("/api/feefo/5",
function (data) {
rooflightRating(data.Rating);
});
$.get("/api/feefo/74",
function (data) {
lightwayRating(data.Rating);
});
});
insertStars.js:
function kornicheRating(rating) {
$(".korniche-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function ecoRating(rating) {
$(".eco-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function signatureRating(rating) {
$(".signature-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function veluxRating(rating) {
$(".velux-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function rooflightRating(rating) {
$(".rooflight-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
function lightwayRating(rating) {
$(".lightway-rating").starRating({
starSize: 30,
readOnly: true,
initialRating: rating,
});
}
I have added toggler on them. now all i want is when one is clicked other two hide their corresponding div's? Here is the code:
$(document).ready(function(){
$('.btn').click(function(){
var scl = this.className.split(/\s+/)[1];
console.log(scl);
$('#' + scl).toggle('slow');
// document.getElementById('applied').style.display = 'none';
// document.getElementById('shortlisted').style.display = 'none';
});
});
and here are the buttons i'm using to toggle.
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
these are the divisions i'm toggling
<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>
You can hide all the container initially. Then on click first hide them and toggle the respective container matching the id attribute:
$(document).ready(function(){
$('.btn').click(function(){
// you can set some style on the seleced button
$('.btn').css({'background-color': '', color: ''});
$(this).css({'background-color': 'green', color: '#fff'});
//
var scl = this.className.split(/\s+/)[1];
$('.container').hide('slow');
$('#' + scl).toggle('slow');
});
});
.container{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
<div class="container" id="openings">Openings</div>
<div class="container" id="applied">Applied</div>
<div class="container" id="shortlisted">Shortlisted</div>
Filterout the current button on click and find their parent "div"s and hide them.
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').not(this).each( function(btn) {
$(this).parents("div").hide("slow");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">No. of Openings</p>
<a data-target="#openings"><button class="btn openings">5</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Applied Positions</p>
<a data-target="#applied"><button class="btn applied">4</button></a>
</div>
</div>
<div class="row-full mt-3">
<div class="col justify-content-center align-items-center">
<p class="h6">Shortlisted</p>
<a data-target="#shortlisted"><button class="btn shortlisted">1</button></a>
</div>
</div>
<div class="container" id="openings"></div>
<div class="container" id="applied"></div>
<div class="container" id="shortlisted"></div>
I am trying to add a script for the search filter and having an error in implementing it. Please let me know where I am wrong
I have added the search bar using the code
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
and after that I added the script inside the body tag
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable h4").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You need to show something higher than what you are currently finding.
You cannot hide the cards and then try to show the H4 inside the card.
Access $("#myTable .card") instead
Also you abuse a side effect of filter - Either filter on content or toggle on content
If the wrapping div is not hidden, you will get a scattering. So now I toggle the hidden wrapper instead
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
$("#myTable .card").each(function() {
$(this).parent().toggle(
$.trim(value)!="" && $(this).text().toLowerCase().indexOf(value) > -1
)
});
});
});
#myTable>div { display:none; float:left; border:1px solid grey; margin:5px; padding:5px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->
You are toggling the h4 instead of the .card that contains it.
You also do not need to toggle while filtering. Filter the ones you want and show them in one go. If you want to go one-by-one then use the .each instead of the .filter
$(document).ready(function() {
$("#myInput").on("input", function() {
var value = $(this).val().toLowerCase();
var allCards = $('#myTable .card');
allCards
.hide() // hide all cards
.filter(function() { // filter the cards that match
var h4text = $(this).find('h4').text().toLowerCase();
return h4text.indexOf(value) > -1;
}).show() // show the filtered cards
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<header class="my-4">
<h1 class="display-3">Welcome to Open Academy</h1>
</header>
<input class="form-control" id="myInput" type="text" placeholder="Search for the courses">
<div class="row text-center" id="myTable">
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Deep Learning</h4>
<p class="card-text">This is an introductory course to Deep learning </p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="card">
<img class="card-img-top" src="#" alt="">
<div class="card-body">
<h4 class="card-title">Machine Learning</h4>
<p class="card-text">This is an introductory course by Cognitive Classes on Machine Learning.</p>
</div>
<div class="card-footer">
Watch Now
</div>
</div>
</div>
</div>
<!-- /.row -->