Hi I am slicing the objects in an array to show me only 12 objects. But when I try to load more objects, it doesnt slide properly, it slides down but the shown object disappears. Below is my code of a section that has a problem in a class component. In the same section I am trying to shuffle the objects based on there categories. I have given my shuffle and load more methods below. When I comment out the shuffle code it works properly. Please help.
component:
<section className="explore-area load-more">
<div className="container ">
<div className="row justify-content-center">
<div className="col-12 col-md-8 col-lg-7">
{/* Intro */}
<div className="intro text-center mb-4">
<span>{this.state.initData.pre_heading}</span>
<h3 className="mt-3 mb-0">{this.state.initData.heading}</h3>
<p>{this.state.initData.content}</p>
</div>
</div>
</div>
<div className="row justify-content-center text-center">
<div className="col-12">
{/* Explore Menu */}
<div className="explore-menu btn-group btn-group-toggle flex-wrap justify-content-center text-center mb-4" data-toggle="buttons">
<label className="btn active d-table text-uppercase p-2">
<input type="radio" defaultValue="all" defaultChecked className="explore-btn" />
<span>{this.state.initData.filter_1}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="art" className="explore-btn" />
<span>{this.state.initData.filter_2}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="music" className="explore-btn" />
<span>{this.state.initData.filter_3}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="collectibles" className="explore-btn" />
<span>{this.state.initData.filter_4}</span>
</label>
<label className="btn d-table text-uppercase p-2">
<input type="radio" defaultValue="sports" className="explore-btn" />
<span>{this.state.initData.filter_5}</span>
</label>
</div>
</div>
</div>
<div className="row items explore-items ">
{this.state.data.map((item, idx) => {
return (
<div key={`edth_${idx}`} className="col-12 col-sm-6 col-lg-3 explore-item item" data-groups={item.group}>
<div className="card">
<div className="image-over">
<a href="/item-details">
<img className="card-img-top" src={item.img} alt="" />
</a>
</div>
{/* Card Caption */}
<div className="card-caption col-12 p-0 ">
{/* Card Body */}
<div className="card-body">
<a href="/item-details">
<h5 className="mb-0">{item.title}</h5>
</a>
<div className="seller d-flex align-items-center my-3">
<span>Owned By</span>
<a href="/author">
<h6 className="ml-2 mb-0">{item.owner}</h6>
</a>
</div>
<div className="card-bottom d-flex justify-content-between">
<span>{item.price}</span>
<span>{item.count}</span>
</div>
<a className="btn btn-bordered-white btn-smaller mt-3" href="/wallet-connect"><i className="icon-handbag mr-2" />{item.btnText}</a>
</div>
</div>
</div>
</div>
);
})}
</div>
<div className="row ">
<div className="col-12 text-center">
<a id="load-btn" className="btn btn-bordered-white mt-5" >{this.state.initData.btnText}</a>
</div>
</div>
</div>
</section>
/*----------------------------------------------
5. Load More
----------------------------------------------*/
(function ($) {
'use strict';
$(".load-more .item").slice(0, 12).show();
$("#load-btn").on('click', function (e) {
e.preventDefault();
$(".load-more .item:hidden").slice(0, 4).slideDown();
if ($(".load-more .item:hidden").length == 0) {
$("#load-btn").fadeOut('slow');
}
});
}(jQuery));
/*----------------------------------------------
6. Shuffle
----------------------------------------------*/
(function ($) {
'use strict';
$('.explore-area').each(function(index) {
var count = index + 1;
$(this).find('.explore-items').removeClass('explore-items').addClass('explore-items-'+count);
$(this).find('.explore-item').removeClass('explore-item').addClass('explore-item-'+count);
$(this).find('.explore-btn').removeClass('explore-btn').addClass('explore-btn-'+count);
var Shuffle = window.Shuffle;
var Filter = new Shuffle(document.querySelector('.explore-items-'+count), {
itemSelector: '.explore-item-'+count,
buffer: 1,
})
$('.explore-btn-'+count).on('change', function (e) {
var input = e.currentTarget;
if (input.checked) {
Filter.filter(input.value);
}
})
});
}(jQuery));
Related
As you can see outer border are lighter than inner border
in this form i tried to remove the bottom border for specific screen size but its not working
I want when screen size matches then bottom border will remove
var x = window.matchMedia("(max-width: 992px)");
myFunction(x);
x.addListener(myFunction);
function myFunction(x) {
if (x.matches) {
document.getElementById("b-brdr").style.borderBottom = "none";
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-lg py-3" id="ofc_use">
<div class="row mx-auto">
<div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center" id="b-brdr">
<h5>FOR OFFICE USE ONLY</h5>
<p>(to be filled by financial institution)</p>
</div>
<div class="col-lg-9">
<div class="row">
<div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
<h4>Application Type*</h4>
</div>
<div class="border border-dark col-lg-1" id="b-brdr"><input type="checkbox" name="application" class="check form-check-input" required> New</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" id="update" name="application" class="check form-check-input" required> Update</div>
<div class="border border-dark col-lg-4" id="b-brdr">
<h5 class="d-inline">KYC Number</h5>
<p class="d-inline"> (Mandotary for KYC Update Request)</p>
</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="text" id="kyc" class="form-control border-0 h-100"></div>
</div>
<div class="row">
<div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
<h4>Account Type*</h4>
</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Normal</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Minor</div>
<div class="border border-dark col-lg-5" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Aadhaar OTP-based e-KYC(in non face to face mode)</div>
</div>
</div>
</div>
</div>
Does this work?
var x = window.matchMedia("(max-width: 992px)");
myFunction(x);
x.addListener(myFunction);
function myFunction(x) {
if (x.matches) {
var div_list = document.querySelectorAll('#b-brdr');
var div_array = [...div_list]
div_array.forEach(div => {
div.style.cssText = "border-bottom:none !important;";
});
}
else{
var div_list = document.querySelectorAll('#b-brdr');
var div_array = [...div_list]
div_array.forEach(div => {
div.style.cssText = "";
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="container-lg py-3" id="ofc_use">
<div class="row mx-auto">
<div class="border border-dark col-lg-3 bg-warning d-flex flex-column justify-content-center" id="b-brdr">
<h5>FOR OFFICE USE ONLY</h5>
<p>(to be filled by financial institution)</p>
</div>
<div class="col-lg-9">
<div class="row">
<div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
<h4>Application Type*</h4>
</div>
<div class="border border-dark col-lg-1" id="b-brdr"><input type="checkbox" name="application" class="check form-check-input" required> New</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" id="update" name="application" class="check form-check-input" required> Update</div>
<div class="border border-dark col-lg-4" id="b-brdr">
<h5 class="d-inline">KYC Number</h5>
<p class="d-inline"> (Mandotary for KYC Update Request)</p>
</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="text" id="kyc" class="form-control border-0 h-100"></div>
</div>
<div class="row">
<div class="border border-dark col-lg-3 d-flex align-items-center" id="b-brdr">
<h4>Account Type*</h4>
</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Normal</div>
<div class="border border-dark col-lg-2" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Minor</div>
<div class="border border-dark col-lg-5" id="b-brdr"><input type="checkbox" name="account" class="check form-check-input" required> Aadhaar OTP-based e-KYC(in non face to face mode)</div>
</div>
</div>
</div>
</div>
Changes made:myFunction changed to document.getElementById("b-brdr").style.cssText = "border-bottom:none !important;";
Demo
Reference
#Md Mohtesham Azam add this to your css below:
#media only screen and (max-width: 992px){
#b-brdr { border-bottom:0 !important;}
}
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>
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>
What I'm trying to get is the immediate upper div value (Accounts Admin) when I'm clicking on a radio button.
Below is my HTML structure. Whenever I click on the admin or alan radio button give me the div inner text Accounts Admin.
How can get that value?
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="admin"
type="radio"
value="admin"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input
id="alan"
type="radio"
value="alan"
name="eng-name"
class="eng-name userlist active"
/>
</div>
</div>
</div>
I'm trying this way but I can't get the value.
$(this).parent().find(".ez-sub-heading").text()
Assuming you have multiple blocks of this, I would change the html structure a bit so you have a wrapper around the complete block. With the closest() function you can find the first wrapper parent and then use find() to look for the header element.
You can use trim() to remove the whitespace caused by code indention.
$('.userlist').on('click', (e) => {
var text = $(e.currentTarget).closest('.wrapper').find('.ez-sub-heading').text();
console.log(text.trim());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
</div>
<div class="display-flex flex-row wrapper">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin 2
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name2" class="eng-name userlist active">
</div>
</div>
</div>
</div>
With your HTML structure as it is, you need to find the closest (nearest parent) .row and then use prevAll to get the header row.
$(this).closest(".row").prevAll(".flex-row").first().text().trim()
$("input.userlist").click(function() {
console.log($(this).closest(".row").prevAll(".flex-row").first().text().trim())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Accounts Admin
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="display-flex flex-row">
<div class="p-1 ez-sub-heading mt-1">
Second Header
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="admin" type="radio" value="admin" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
<div class="row m-0">
<div class="col-auto">
<div>
<input id="alan" type="radio" value="alan" name="eng-name" class="eng-name userlist active">
</div>
</div>
</div>
A small change to the HTML structure and adding some classes would make this much simpler (not included here as already suggested in the other answer).
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>