Image slider using css and javascript - javascript

I'm new to JavaScript/JQuery. I'm trying to implement a image slider using only CSS and Jquery. When clicked on one slider's navigation, elements of other slider also starts moving. If i use separate Id for each slider then it works fine, but I don't want to use separate Id for each slider. How I will detect which slider's navigation is clicked and move elements accordingly.
Thanks in advance!!
Here is Demo
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>1</div>
</div>
<div class="col-sm-3 li">
<div>2</div>
</div>
<div class="col-sm-3 li">
<div>3</div>
</div>
<div class="col-sm-3 li">
<div>4</div>
</div>
<div class="col-sm-3 li">
<div>5</div>
</div>
<div class="col-sm-3 li">
<div>6</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>A</div>
</div>
<div class="col-sm-3 li">
<div>B</div>
</div>
<div class="col-sm-3 li">
<div>C</div>
</div>
<div class="col-sm-3 li">
<div>D</div>
</div>
<div class="col-sm-3 li">
<div>E</div>
</div>
<div class="col-sm-3 li">
<div>F</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
</div>
</div>
</div>
CSS
.sr {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.ul {
overflow:hidden;
height:100px;
}
.li {
display: inline-block;
text-align:center;
height:100px;
background:#ccc;
}
.js #live {
display:none;
}
Jquery
$(document).ready(function() {
var slidestash;
var lastindex = $(".live .ul .li").length - 1;
var numstashed = 2;
function setup() {
$(".live")
.attr('aria-label', "Rotating list of statistics")
.attr('aria-live', 'polite')
.attr('aria-relevant', 'additions')
.attr('aria-atomic', 'false');
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
}
setup();
$("html").removeClass("js");
$(".prev").click(function() {
$(".live .ul").prepend(slidestash);
slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")").detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});
$(".next").click(function() {
$(".live .ul").append(slidestash);
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")").detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
})
});

What you want to do here is
place all the code for running a slider in a single function
run that function on each of your slider instances
limit the code from one instance to apply inside that element only.
First two points are easy:
1.
function initSlider(e) {
..code here...
}
2.
$('presentation').each(function(i,e) {
initSlider(e);
})
For 3, you need to pass the instance - $(e) - to all jQuery selectors in your function, as the second param (delimiter), to tell jQuery: "only select inside this element".
For example, $(".live") will become $(".live", $(e)).
Here it is, working:
$(window).on('load', function() {
$("html").removeClass("js");
$('.presentation').each(function(i, e) {
initSlider(e);
});
function initSlider(e) {
var slidestash,
lastindex = $(".live .ul .li", $(e)).length - 1,
numstashed = 2;
function setup() {
$(".live", $(e))
.attr('aria-label', "Rotating list of statistics")
.attr('aria-live', 'polite')
.attr('aria-relevant', 'additions')
.attr('aria-atomic', 'false');
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
}
setup();
$(".prev", $(e)).click(function() {
$(".live .ul", $(e)).prepend(slidestash);
slidestash = $(".live .ul .li:nth-child(n+" + lastindex + ")", $(e)).detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});
$(".next", $(e)).click(function() {
$(".live .ul", $(e)).append(slidestash);
slidestash = $(".live .ul .li:nth-child(-n+" + numstashed + ")", $(e)).detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
})
}
})
.sr {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}
.ul {
overflow:hidden;
height:100px;
}
.li {
display: inline-block;
text-align:center;
height:100px;
background:#ccc;
}
.js #live {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>1</div>
</div>
<div class="col-sm-3 li">
<div>2</div>
</div>
<div class="col-sm-3 li">
<div>3</div>
</div>
<div class="col-sm-3 li">
<div>4</div>
</div>
<div class="col-sm-3 li">
<div>5</div>
</div>
<div class="col-sm-3 li">
<div>6</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
<div class="outer_pro_layer">
<div class="presentation">
<button class="prev" aria-describedby="prevdesc" aria-controls="live">Previous</button>
<div class="live">
<div class="ul">
<div class="col-sm-3 li">
<div>A</div>
</div>
<div class="col-sm-3 li">
<div>B</div>
</div>
<div class="col-sm-3 li">
<div>C</div>
</div>
<div class="col-sm-3 li">
<div>D</div>
</div>
<div class="col-sm-3 li">
<div>E</div>
</div>
<div class="col-sm-3 li">
<div>F</div>
</div>
</div>
</div>
<button class="next" aria-describedby="nextdesc" aria-controls="live">Next</button>
</div>
</div>
</div>
</div>
</div>
As you can see, the JavaScript now works correctly. If you need more help with it, please turn your code into a live snippet, so I can see what I'm doing and how it's supposed to look.

You are on the right track, but you need to limit the context of the elements. for example, prev button should only affect the slider that the button is contained within.
For this, you can use the .container element as the root of a slider, and search for the elements inside it.
For example:
$(".prev").click(function() {
var container = $(this).parents(".outer_pro_layer").first();
// or $(this).closest(".outer_pro_layer") or $(this).parent(".outer_pro_layer")
container.find(".live .ul").prepend(slidestash);
slidestash = container.find(".live .ul .li:nth-child(n+"+lastindex+")").detach();
if (!$(this).is(":focus")) $(this).focus(); //iOS hack
});

Related

jQuery/Bootstrap follow div with hover item

I have a basic search result page using bootstrap and when I hover on an item RHS div should follow and slide to that specific item. Please refer to the following page to see what I'm trying to achieve. How can I achieve this using jQuery?
Example
JS Fiddle
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
You can animate the marginTop property. Note: To use the animate method you'll have to drop jquery.slim and use the full version.
Run the snippet on fullscreen, otherwise bootstrap's breakpoints kick-in.
$('.search-result').on('mouseover', function() {
// Cancel previous animation
$('.availability').stop();
// Get position of the triggered element
let newTop = $(this).offset().top + 'px';
// Animate availability box
$('.availability').animate({
marginTop: newTop
}, 800);
})
.search-result {
background-color: green;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
.availability {
background-color: red;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>
$(document).ready(function(){
var positionY=0;
$('.search-result').hover(function(){
var position=$(this).position();
positionY=$(this).get(0).getBoundingClientRect().y;
/* transform: translateY(51px); */
$('.availability').css({transform:'translateY('+(positionY-15)+'px)'});
})
})
.search-result {
background-color: green;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
}
.availability {
background-color: red;
padding: 45px 20px;
color: #fff;
margin: 15px 0;
position: fixed;
top: 1px;
right: 10px;
/* display:none; */
}
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<div class="fluid-container">
<div class="row">
<div class="col-md-7">
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
<div class="search-result">
Search result
</div>
</div>
<div class="col-md-3">
<div class="availability">
Slide Down
</div>
</div>
</div>
</div>

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?
Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>
Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));
In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>
Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Simple sort DIV by name, and number

I want to sort my div using vanilla JS by name and number. Before i sorting only list, and this is not a problem, but here i have a problem how to do this.
Maybe need create object, and save all value to him, and then sorting object?
Now i trying loop or items, but i can't get item-price or item-name in 'item'
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName(){
var items = document.querySelectorAll('.item');
}
function sortingByPrice(){
var items = document.querySelectorAll('.item');
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>
Using flexbox for this could be useful cuz you can rearrange them with order, and it will save you a lot of re-rendering and moving bit's and pieces
Doe the flex layout will make it behave a little differently. So you might have to fix the css a bit.
Also the tab index might not be what you expect if you have inputs and what not.
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName() {
var items = document.querySelectorAll('.item');
// get all items as an array and call the sort method
Array.from(items).sort(function(a, b) {
// get the text content
a = a.querySelector('.item-name').innerText.toLowerCase()
b = b.querySelector('.item-name').innerText.toLowerCase()
return (a > b) - (a < b)
}).forEach(function(n, i) {
n.style.order = i
})
}
function sortingByPrice(){
var items = document.querySelectorAll('.item')
Array.from(items).sort(function(a, b) {
// using ~~ to cast the value to a number instead of a string
a = ~~a.querySelector('.item-price').innerText
b = ~~b.querySelector('.item-price').innerText
return a - b
}).forEach(function(n, i) {
n.style.order = i
})
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.items {
display: flex;
}
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>

How to use $(this) selector to animate divs with the same class?

I have two divs, with the same class name of .pageSlide. When I click on the button with class name .moveup or .movedown, I specifically want that button's respective div to slide up or down. At the moment, if I click on the button associated with say, div A, then div B also animates. I'm guessing I need a $(this) selector in the JS somewhere. I'm not sure.
Here's a jsfiddle of working code
https://jsfiddle.net/hpe459ok/
Essentially I have this:
$('.moveup').click(function() {
if ($('.pageSlide').css('top') == '-420px') {
$('.pageSlide').animate({
top: '0'
}, 700);
} else {
$('.pageSlide').animate({
top: '0'
}, 700);
}
});
$('.movedown').click(function() {
if ($('.pageSlide').css('top') == '0') {
$('.pageSlide').animate({
top: '420'
}, 500);
} else {
$('.pageSlide').animate({
top: '420'
}, 500);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
<div class="page1">
content
<button class="moveup">Next page</button>
</div>
<div class="page2 pageSlide">
content
<button class="movedown">Previous page</button>
</div>
</div>
<div class="container2">
<div class="page1">
content
<button class="moveup">Next page</button>
</div>
<div class="page2 pageSlide">
content
<button class="movedown">Previous page</button>
</div>
</div>
Try using the below code:
$('.moveup').click(function() {
$(this).closest(".page1").siblings('.pageSlide').animate({
top: '0'
}, 700);
});
$('.movedown').click(function() {
$(this).closest(".page2").animate({
top: '420'
}, 500);
});
I would use data attributes on your .moveup and .movedown buttons. By setting an attribute data-parent to be the id of the top level parent <div> it becomes trivial to modify your existing functions to handle the proper animations.
$('.moveup').click(function() {
var parent = $(this).data('parent');
if ($('#'+parent).find('.pageSlide').css('top') == '-420px') {
$('#'+parent).find('.pageSlide').animate({
top: '0'
}, 700);
} else {
$('#'+parent).find('.pageSlide').animate({
top: '0'
}, 700);
}
});
$('.movedown').click(function() {
var parent = $(this).data('parent');
if ($('#'+parent).find('.pageSlide').css('top') == '0') {
$('#'+parent).find('.pageSlide').animate({
top: '420'
}, 500);
} else {
$('#'+parent).find('.pageSlide').animate({
top: '420'
}, 500);
}
});
.pageSlide {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 400px;
background: ghostwhite;
z-index: 0;
}
.page2 {
z-index: 1;
top: 420px;
}
.image-wrapper {
height: 400px;
overflow: hidden;
position: relative;
text-align: center;
border: black 1px solid;
}
.overlay-left {
background-color: white;
}
.overlay-right {
background-color: white;
}
.image-overlay-content-left {
background-color: white;
}
.image-overlay-content-right {
background-color: white
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="small-12 columns" id="nominate">
<div class="image-wrapper overlay overlay-left">
<div class="image-overlay-content image-overlay-content-left" id="formslide">
<form id="foo" method="post" name="nomForm" action="nominate-test.html#thankyou">
<div class="page1">
<label class="row">
<h2 class="headline">Your name</h2>
<input placeholder="e.g. John Smith" type="text" name="name" id="name" tabindex="1" autofocus>
<span id="nameError" class="error headline"></span>
</label>
<label class="row email">
<h2 class="headline">Your email address</h2>
<input placeholder="example#rofordaward.co.uk" type="text" name="email" id="email" tabindex="2">
<span id="emailError" class="error headline"></span>
</label>
<label class="row">
<h2 class="headline">Company name</h2>
<input placeholder="e.g. Roford" type="text" name="company" id="company" tabindex="3">
<span id="companyError" class="error headline"></span>
</label>
<div class="next">
<button type="button" class="moveup" data-parent="nominate">Next page</button><i class="icon-down-open"></i></div>
</div>
<div class="pageSlide page2">
<label class="row reason">
<h2 class="headline">Reason for nomination</h2>
<textarea id="textarea" rows="6" cols="25" maxlength="1000" name="message" id="message" placeholder="A brief evidence based summary"></textarea>
<span id="messageError" class="error headline"></span>
<div id="text-area-wrap">
<div id="textarea_feedback"></div>
</div>
</label>
<div class="row button-wrap">
<div class="column small-12">
<input class="button" name="submit" type="submit" id="contact-submit" value="Submit">
</div>
</div>
<div class="prev">
<button type="button" class="movedown" data-parent="nominate">Previous page</button><i class="icon-up-open"></i></div>
</div>
</form>
</div>
</div>
</div>
<div class="small-12 columns" id="apply">
<div class="image-wrapper overlay overlay-right">
<div class="overlay-option-headline overlay-option-headline-right">
<h5>Tell us why you're a great business</h5>
<h1 class="headline">Apply</h1>
</div>
<div class="image-overlay-content image-overlay-content-right">
<div class="page1">
<h2 class="headline">Application Form</h2>
<div class="row apply-points">
<div class="column small-12">
<h5>Please make sure you have read our Criteria page and terms and conditions in full before applying.</h5></div>
<div class="column small-12">
<h5>Ensure you have gathered evidence to support your application.</h5></div>
<div class="column small-12">
<h5>Shortlisted companies will be contacted with further instructions.</h5></div>
</div>
<div class="next">
<button type="button" class="moveup" data-parent="apply">Next page</button><i class="icon-down-open"></i></div>
</div>
<div class="page2 pageSlide">
<h2 class="headline">Contact name</h2>
<div class="row apply-points">
<div class="column small-12">
<h5>aduhwijdaduhwijdaduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijd aduhwijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd ijdaduhwijdaduhwijdaduhwijdaduhwijdad aduhwijd aduhwijd aduhwijdaduhwijd aduhwijd</h5></div>
</div>
<div class="prev">
<button type="button" class="movedown" data-parent="apply">Previous page</button><i class="icon-up-open"></i></div>
</div>
</div>
</div>
</div>

Toggle class in closest parent

So I have this jquery that i need to make it work. But through all the parents() and children(), I can't get to where I want.
My objective is when I click in the button, the class icon-cross, toggle to icon-tick.
(In this snippet bellow, I made an example to explain better. In this case I want to change the color of the rectangle)
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
$(this).closest(".quoteCompare").children(".quoteCompareInside").p.toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: green;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>
You should take p as selector, not as property:
$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').toggleClass("icon-tick icon-cross");
If you want to get only 1st p element you can use eq method:
$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
Edit:
Note that closest quoteCompare will return second div with classes medium-6 xsmall-12 small-12 column quoteCompare, so you probably also should use prev() in your code:
$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: green;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>
You can include the p in the children() selector:
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
$(this).closest(".quoteCompare").children(".quoteCompareInside p").toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: green;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>
We need to traverse to <div class="row"> to grab the associated <p> tag. Please have a look at below snippet:
$(function() {
$(".addOpt").click(function(e) {
$(this).text(function(i, text) {
return text === "Add" ? "Remove" : "Add";
});
$(this).toggleClass("btn-primary btn-remove");
//the problem is the following line:
if($(this).text() === "Remove")
$(this).closest(".row").find("p.icon-cross").toggleClass("icon-tick icon-cross");
else
$(this).closest(".row").find("p.icon-tick").toggleClass("icon-tick icon-cross");
e.preventDefault();
});
})
.icon-cross {
width: 50px;
height: 10px;
background-color: blue;
}
.icon-tick {
width: 50px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<p class="icon-cross"></p>
<p class="title noMarginBottom">10€</p>
</div>
</div>
<div class="medium-6 xsmall-12 small-12 column quoteCompare ">
<div class="quoteCompareInside quoteStandard sameHeight2">
<div class="form-row valign">
<button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
</div>
</div>
</div>
</div>

Categories