I have multiple columns like this
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>
What I am looking for is get value of nearest p text inside flip-card-front class when I click copy class image icon. I am new in javascript and does not getting idea how I can do it.
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
//get text નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!
console.log("p tag value which is inside flip-card-front");
});
}
I am trying from last hour but have not found any working solution for achieve my goal. Let me know if someone here can help me for same. Thanks!
regarding your structure
you search closest blog_content, from there search flip-card-front p:
copy[i].addEventListener('click', evt => {
const el = evt.target.closest('.blog_content');
const mySearchedText = el.querySelector('.flip-card-front p).innerHTML;
});
not tested but should be ok
You you need to do:
Navigate to the necessary node.
For this, you will have to go to common parent in the DOM tree. You can use .closest to do that.
Once you have parent, you can lookup any necessary element from it
var copy = document.getElementsByClassName('copy');
for (var i = 0; i < copy.length; i++) {
copy[i].addEventListener('click', function() {
const content = this.closest('.blog_content')
const cardFront = content.querySelector('.flip-card-front p')
const text = cardFront.textContent;
console.log(text)
});
}
<div class="col-md-6 mt-3 mt-md-0">
<div class="blog_content d-flex bg-dark text-white flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5 class="mb-0 border-0">નુતન વર્ષ 2023 ની શરૂઆત </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0 h-100">
<div class="flip-card h-100">
<div class="flip-card-inner h-100">
<div class="flip-card-front d-flex justify-content-center align-items-center">
<p class="">નુતન વર્ષ 2023 ની<br> શરૂઆત કંઈક એવી થાય,<br> તમારા જીવનમાં ખુશીઓ ફેલાય,<br> આનંદ મંગલથી દરેક દિવસ<br> પસાર થાય એવી હાર્દિક<br> શુભકામનાઓ !!</p>
</div>
<div class="flip-card-back d-flex justify-content-center align-items-center">
<p class="">nutan varsh 2023 ni<br> sharuat kaik evi thay,<br> tamar jivanam khushio felay,<br> anand mangalathi darek divas<br> pasar thay evi hardik<br> shubhakamanao !!</p>
</div>
</div>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/festival/happy-new-year-2023">નવા વરસની શુભકામનાઓ</a></h6>
<p class="mb-0"><small>1 day ago</small></p>
</div>
<div class="right">
<span class="copy"><img src="https://stag.example.com/assets/images/copy.png" class="mx-1 social" alt="share quote" width="24" height="24"></span>
<img src="https://stag.example.com/assets/images/share.png" class="mx-1 social" alt="share quote" width="24" height="24">
</div>
</div>
</div>
</div>
Related
I'm trying to swap a div's contents in a Bootstrap 5 row structure on hover. I'm currently trying to use Jquery for this but the method isn't working. It doesn't show any errors whatsoever, just doesn't work.
I don't care much if this can be done in JS or CSS, just need a solution that can replace div contents on hover. Additionally, if there could be a replacement animation (fade or slide) that'd be great.
$('.switch').hover(function() {
$(this).find('start1').hide();
$(this).find('switched').show();
}
, function() {
$(this).find('switched').hide();
$(this).find('start1').show();
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
You were close with the JavaScript. this ends up being the .switch element, so you can use that as the context for the selector. Obviously you'll need to update the logic to handle all of the menu items.
$('.switch').hover(function() {
$('.start1', this).hide();
$('.switched', this).show();
}, function() {
$('.switched', this).hide();
$('.start1', this).show();
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
Alternatively, here is a CSS-based approach
.switch:hover>.start1,
.switch:hover>.start2,
.switch:hover>.start3 {
display: none !important;
}
.switched,
.switched2,
.switched3 {
display: none;
}
.switch:hover>.switched,
.switch:hover>.switched2,
.switch:hover>.switched3,
.start1,
.start2,
.start3 {
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
So I figured out a solution using CSS. Turns out the whole thing was much simpler than I thought.
Here's the Codepen.
HTML :
<div class="container my-5 px-5">
<div class="row switch gx-5 text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid hider mb-3 h-50" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid h-50 mb-3 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid mb-3 h-50 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
</div>
</div>
CSS :
.start1{
transition: background-color .25s;
}
.start2{
transition: background-color .25s;
}
.start3{
transition: background-color .25s;
}
.start1:hover{
background-color: #D86241;
}
.start2:hover{
background-color: #A1274C;
}
.start3:hover{
background-color: #771E3A;
}
.shower{
display: none;
color: white;
text-align: left !important;
}
.start1:hover .hider,
.start2:hover .hider,
.start3:hover .hider
{
display: none;
}
.start1:hover .shower,
.start2:hover .shower,
.start3:hover .shower
{
display: block;
}
Good day,
I am working on this project of mine but unfortunately I'm not skilled enough yet to fix the following problem I have been trying to solve for some time now. I have a webpage that shows the amount of calories that someone needs to consume to hit their training goals. Based on a 3 options radio input selection I want to show 3 different images on the output page based on the selection they made. This can be weight loss, maintenance or muscle gain.
The code is as following:
Code for the input of the goal:
<!-- Goal -->
<div class="row px-md-5 mrow" id="rowtwo">
<div class="col-12 py-5">
<div class="text-center">
<h2 class="text-primary">2. Wat is je doel?</h2>
</div>
</div>
<div class="col-12 col-md-12">
<ul class="row radio-group-goal d-flex flex-stretch p-0 m-0">
<li class="radio col-md-6 selected d-flex flex-stretch mb-2" data-goal="Afvallen / Lager vetpercentage" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100 greenborder">
<h6 class="text-left"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-weight text-primary mr-2"></i> Afvallen / Lager vetpercentage</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">minder kcal/koolhydraten</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Gezonde levensstijl" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-carrot text-primary mr-2"></i> Gezonde levensstijl</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">Gezond</p> -->
</div>
</li>
<li class="radio col-md-6 d-flex flex-stretch mb-2" data-goal="Aankomen / Meer spiermassa" style="list-style: none;">
<div class="innerradio d-flex flex-column content shadow-sm rounded p-4 d-flex flex-row bg-white w-100">
<h6 class="text-left mb-0"><i class="fas fa-check-circle hidebtn text-success mr-1"></i> <i class="fas fa-dumbbell text-primary mr-2"></i> Aankomen / Meer spiermassa</h6>
<!-- <p class="mb-0 text-left" style="font-size: 12px; line-height: 14px">muscle</p> -->
</div>
</li>
</ul>
</div>
Code for the output:
<div class="col-12 col-md-6">
<div class="row">
<div class="col-12 col-md-6 mb-4 d-flex flex-stretch">
<div class="youchoose-box px-4 py-5 d-flex align-items-center justify-content-center flex-column bg-white rounded shadow-sm w-100" style="border:1px solid white;">
<i class="fas fa-trophy text-center text-primary mb-2"></i>
<!-- <p class="mb-0 text-center">Doel</p> -->
<h5 class="text-primary text-center">
<?php echo $_POST['radio-value'];?>
</h5>
</div>
</div>
//The image I want to change based on the radio value:
<div class="container pb-5">
<div class="row">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="d-flex align-items-center justify-content-center rounded shadow-sm">
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/Macro-split.png">
</div>
</div>
</div>
</div>
<!-- save values and send to next pages -->
<input type="hidden" id="radio-value" name="radio-value" value="<?php echo $_POST['radio-value']?>" />
I hope you can guide me in the right direction as I am now on the basics of understanding Javascript.
Thank you in advance!
Assuming your value is coming through in $_POST['radio-value'] the basic way to do this would be with an if statement to check if one of the 3 values is set, and then set which image that value corrresponds to:
//The image I want to change based on the radio value:
<?php
$image = 'default.png';
if (isset($_POST['radio-value'])) {
if ($_POST['radio-value'] == 'value for image 1') {
$image = 'value1image.png';
} else if ($_POST['radio-value'] == 'value for image 2') {
$image = 'value2image.png';
} else if ($_POST['radio-value'] == 'value for image 3') {
$image = 'value3image.png';
}
}
?>
Then in your image src:
<img src="<?php echo home_url();?>/wp-content/uploads/2020/12/<?php echo $image;?>">
I'm unable to make this filter work properly.
All I want is if someone clicks on a particular filter, the products underneath gets sorted accordingly.
I have used data-* attributes for filtering.
HTML:
<section id="store" class="store py-5">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize">our <strong class="banner-title ">store</strong></h1>
</div>
</div>
<!-- end of section title -->
<!--filter buttons -->
<div class="row">
<div class=" col-lg-8 mx-auto d-flex justify-content-around my-2 sortBtn flex-wrap">
all
cakes
cupcakes
sweets
doughnuts
</div>
</div>
<!--end of filter buttons -->
<!-- store items-->
<div class="row" id="store-items">
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
</div>
</section>
JS:
const storeItems = document.querySelectorAll('.store-item');
const filterBtn = document.querySelectorAll('.filter-btn');
function filterItems(){
filterBtn.forEach(function(btn){
const filter = btn.dataset.filter;
if (filter === "all"){
console.log(filter);
storeItems.forEach(function(item){
item.style.display = "block"
})
}
else if (filter === "cakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "cupcakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cupcakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "sweets"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('sweets')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "doughnuts"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('doughnuts')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
})
}
What happens is on clicking on a particular filter button, only the products having class="doughnuts" gets displayed and the rest sets to display:none.
To better explain there's a demo available here: https://codepen.io/sumayya_ishaq/pen/eYdQaRy
How to get values from 2 card and store in array using jquery. i want Store card value like this given below using dynamic way.
array(
card_1{
a:'AAA',
b:'BE',
c:'ECE',
d:'June 1994',
e:'Pursuing',
f:'Full-Time',
g:'AAAA',
h:'BBBB',
i:'//placehold.it/115'
},
card_2{
a:'BBB',
b:'BE',
c:'CSE',
d:'June 2000',
e:'May 2010',
f:'Part-Time',
g:'DDDD',
h:'CCCC',
i:'//placehold.it/115'
},
)
<div class="content with-padding col-sm-12 no-border education">
<div class="card flex-row flex-wrap border-bottom m-3 " style="border:none;">
<div class="card-header no-border p-0">
<img src="//placehold.it/115" alt="">
</div>
<div class="card-block col-sm-10 no-border p-2">
<h5 class="card-title m-0 p-0">AAA</h5>
<p class="card-text m-0 p-0">BE-<span>ECE</span></p>
<p class="card-text m-0 p-0">June 1994 - Pursuing. <span>Full-Time</span></p>
<p class="card-text m-0 p-0">AAAA,BBBB</p>
</div>
<div>
<button class="float-right rounded-circle education-remove ripple-effect "><i class="icon-material-outline-delete text-danger ml-2"></i></button>
<button class="float-right rounded-circle ripple-effect "><i class="icon-feather-edit "></i></button>
</div>
</div>
<div class="card flex-row flex-wrap border-bottom m-3 " style="border:none;">
<div class="card-header no-border p-0">
<img src="//placehold.it/115" alt="">
</div>
<div class="card-block col-sm-10 no-border p-2">
<h5 class="card-title m-0 p-0">BBB</h5>
<p class="card-text m-0 p-0">BE-<span>CSE</span></p>
<p class="card-text m-0 p-0">June 2000 - May 2010. <span>Part-Time</span></p>
<p class="card-text m-0 p-0">DDDD,CCCC</p>
</div>
<div>
<button class="float-right rounded-circle education-remove ripple-effect "><i class="icon-material-outline-delete text-danger ml-2"></i></button>
<button class="float-right rounded-circle ripple-effect "><i class="icon-feather-edit "></i></button>
</div>
</div>
</div>
You would need to iterate through each card-block and access the card-block's card-title and again iterate through the card-block's inner card-text children and get their text nodes. You could use the following example to get the values of these text nodes and then you would need to use regex to filter the values for your json string
$(function()
{
$('.card-block').each((index, value) =>
{
var title = $(value).find('.card-title').text();
console.log(title);
$(value).find('.card-text').each((textIndex, textValue) =>
{
var cardtext = $(textValue).text();
console.log(cardtext);
});
});
});
Is it possible to append dynamically jquery function after another..
Here's what I've tried
$('div#bottomPart').children().getNext(3).children().children().find('p').eq(3).text();
function getNext(num) {
var appendNext = "";
for (var i = 0; i < num; i++) {
appendNext = appendNext + next();
}
return appendNext;
}
don't judge the code it's just to give you all an idea of my thought.
I'm trying to add next() using a for loop in the selector something like
if getNext(1) then it should return the selector like $('div#bottomPart').children().next().children().children().find('p').eq(3).text();
or if getNext(2) then it should return the selector like $('div#bottomPart').children().next().next().children().children().find('p').eq(3).text();
Here's my HTML:
<div id="bottomPart">
<div class="card d-flex flex-row mb-3 table-heading">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center" id="compareHeading">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Parameters</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Go Digit General Insurance Company Ltd..jpg" alt="Go Digit General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Reliance General Insurance Company Ltd..jpg" alt="Reliance General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">ENTERPRISE</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Own Damage Cover</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od3</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Team permissions</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp3</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">24/5 Support</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su51</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su52</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su53</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">24/7 Support</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su71</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su72</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">su73</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">User actions audit log</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">log1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">log2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">log3</p>
</div>
</div>
</div>
As I am using a for loop (not the above one) to find the p tag in my html according to data given by user.
If only there's a solution for appending the next() function it would be a lot easier for me..
So is it possible??
See if this help you:
function getNext(selectorJquery, methodsValues) {
var next = $(selectorJquery);
$(methodsValues).each(function() {
for (var method in this) {
if (this[method] !== null) {
next = next[method](this[method]);
} else {
next = next[method]();
}
}
});
return next;
}
var methodsValues = [
{children: null},
{next: null},
{children: null},
{children: null},
{find: 'p'},
{eq: 3},
{text: null}
];
console.log($('div#bottomPart').children().next().children().children().find('p').eq(3).text());
console.log(getNext($('div#bottomPart'), methodsValues));
var otherMethodsValues = [
{children: null},
{next: null},
{next: null},
{children: null},
{children: null},
{find: 'p'},
{eq: 3},
{text: null}
];
console.log($('div#bottomPart').children().next().next().children().children().find('p').eq(3).text());
console.log(getNext('div#bottomPart', otherMethodsValues));
You can do what you are after with nextAll() and eq(). Below is an example that will select 2 lis after or 4 lis after the 3rd li.
$("#li3").nextAll().eq(1).css("color", "green")
$("#li3").nextAll().eq(3).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
If you really want to extend jQuery to add your own method you do it with jQuery.fn.
jQuery.fn.extend({
getNext: function(cnt) {
return $(this).nextAll().eq(cnt - 1)
},
})
$("#li3").getNext(2).css("color", "green")
$("#li3").getNext(4).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
Or doing it the way you were trying with next()
jQuery.fn.extend({
getNext: function(cnt) {
var elem = $(this)
while(cnt>0 && elem.length) {
elem = elem.next()
cnt--
}
return elem
},
})
$("#li3").getNext(2).css("color", "green")
$("#li3").getNext(4).css("color", "red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul>
<li>1</li>
<li>2</li>
<li id="li3">3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
In the end there is no need to do all that chaining when a simple jQuery selector can do it all.
var text = $("#bottomPart > div:eq(2) div.card-body > p:eq(2)").text()
console.log(text)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bottomPart">
<div class="card d-flex flex-row mb-3 table-heading">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center" id="compareHeading">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Parameters</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Go Digit General Insurance Company Ltd..jpg" alt="Go Digit General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">
<img class="card-img-top" style="width: 7rem; object-fit: contain;" src="/static/images/Reliance General Insurance Company Ltd..jpg" alt="Reliance General Insurance Company Ltd.">
</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">ENTERPRISE</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Own Damage Cover</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">od3</p>
</div>
</div>
</div>
<div class="card d-flex flex-row mb-3">
<div class="d-flex flex-grow-1 min-width-zero">
<div class="card-body align-self-center d-flex flex-column flex-md-row justify-content-between min-width-zero align-items-md-center">
<p class="list-item-heading mb-0 truncate width-30 w-xs-100">Team permissions</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp1</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp2</p>
<p class="mb-0 text-primary w-20 w-xs-100 text-center">tp3</p>
</div>
</div>
</div>