JQuery toggle() append html element - javascript

I have multiple selection divs like cards. If one click on "select" then the title of that card is appended to the selection list.
My problem is the "unselect" button, which should instead remove the card title from the list. I've tried with toggle() append() and remove() without success. Card Title is appended but not removed.
function accessories(){
var accessories;
$('.accessories').toggle(function() {
accessories = $(this).closest('.card').find('.image-title').text();
acc_txt = '<p> - ' + accessories + '</p>'; //element to append and remove later.
$('#selection').append(acc_txt);
$(this).css({background: '#35a8a5', border: '1px solid #35a8a5'});
$(this).val('Unselect');
}, function() {
$('#selection').remove(acc_txt);
$(this).css({background: '', border: ''});
$(this).val('Select');
});
}
jQuery(document).ready(function() {
accessories();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div id="selection">here Should be appended the cards</div>
.accessories is the class of the button inside the card. So I search for the title .image-title and I append it. There are multiple cards on the page.
I don't know though how could I make the unselect button works.
How can I achieve it?

Please check below snippet. Here I have replaced your toggle function with click function and using .each loop find out all the selected accessories on every click so only selected accessories will found. No need to remove un-selected accessories in this case.
$(document).ready(function(){
$('.accessories').click(function() {
var current_status = $(this).val();
if(current_status=='Select'){
$(this).css({background: '#35a8a5', border: '1px solid #35a8a5'});
$(this).val('Unselect');
}else{
$(this).css({background: '', border: ''});
$(this).val('Select');
}
var accessories = "";
$('.accessories[value="Unselect"]').each(function(){
var selection = $(this).closest('.card').find('.image-title').html();
accessories += '<p> - ' + selection + '</p>';
});
$('#selection').html(accessories);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection">here Should be appended the cards</div><br/><br/>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™ - 1</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™ - 2</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>
<div class="col-sm-4 card">
<div class="card-img">
<img src="http://skiersedge.com.sg/wp-content/uploads/2016/08/cpw-vest.jpg"/>
</div>
<h3 class="image-title text-center">Core Power Weighted Vest™ - 3</h3>
<div class="image-desc">
<p><strong>Available for all models.</strong></p>
<p>Increase the intensity of any workout with the addition of the Core Power weighted vest with soft flexible weights. This is the best fitting, most comfortable weighted vest available and is adjustable up to 22 lbs. in 1/2 lb. increments. Comes standard with 11 lbs.</p>
</div>
<input type="button" name="next" class="accessories" value="Select"/>
</div>

Related

How to select multiple sections to create an object literal with Javascript?

Goal: I'm trying to create an object literal that includes all the information in three different sections so a user can order multiple of multiple items and their order can be saved in session storage and later sent to a server.
My Problem: Other than selecting the parentNode of the order button, which only selects one of the three sections, I can't figure out how to get querySelectorAll to work with a variable that includes all three sections. It always says xVariable(container in this code).querySelectorAll isn't a function, or if it returns an object all the fields are null.
const orderButtons = document.querySelectorAll(".orderButton");
orderButtons.forEach(function(button) {
button.addEventListener("click", function() {
const container = document.querySelectorAll(".merch");
let order = {
title: container.querySelectorAll(".title").innerText,
price: container.querySelectorAll(".price").innerText,
description: container.querySelectorAll(".description").innerText,
quantity: container.querySelectorAll(".orderQuantity").innerText
};
console.log(order);
});
});
<article class="merchOrderPage">
<h1>Treadhead and Tank Models, Merch, Books, and More</h1>
<p>Here you can buy tank model kits, books about tanks and armored vehicles, and merch for our website.</p>
<div class="row">
<section id="orderItem1" class="column merch small-12 medium-12 large-4">
<img src="/images/ShermanEasy8Model.jpg" alt="Model of M4A3E8 Sherman Tank">
<h2 class="title">US M4A3E8 "Easy 8" Sherman </h2>
<p class="description">A plastic model of the M4A3E8 "Easy 8" Sherman.</p>
<p class="price">$29.99</p>
<button data-minusOrder="easy8" type="button">-</button><span class="orderQuantity" id="Easy8ModelQuantity">0</span><button data-plusOrder="easy8" type="button">+</button>
<button class="orderButton">Order</button>
</section>
<section id="orderItem2" class="column merch small-12 medium-12 large-4">
<img src="/images/ShermanTanksByDennisOliver.jpg" alt="Book cover of 'Sherman Tanks: US Army, North-Western Europe, 1944 to 1945 by Dennis Oliver'">
<h2 class="title">Sherman Tanks: US Army, North-Western Europe, 1944-1945</h2>
<p class="description">This excellent book by Dennis Oliver chronicles the history and service of the Sherman in Europe from 1944-1945.</p>
<p class="price">$49.99</p>
<button data-minusOrder="shermanbookoliver" type="button">-</button><span class="orderQuantity" id="ShermanTanksDennisOliverQuantity">0</span><button data-plusOrder="shermanbookoliver" type="button">+</button>
<button class="orderButton">Order</button>
</section>
<section id="orderItem3" class="column merch small-12 medium-12 large-4">
<img src="/images/Pz.IV T-Shirt.jfif" alt="Black shirt with a white profile of a Panzer IV.">
<h2 class="title">Panzer IV T-Shirt (Black)</h2>
<p class="description">A black cotton t-shirt with a solid white outline of a Panzer IV tank on it.</p>
<p class="price">$19.99</p>
<button data-minusOrder="pzivshirt" type="button">-</button><span class="orderQuantity" id="PanzerIVShirtQuantity">0</span><button data-plusOrder="pzivshirt" type="button">+</button>
<button class="orderButton">Order</button>
</section>
</div>
</article>
querySelectorAll returns a NodeList, which you need to iterate over. Then, you need just querySelector to find the only element:
let order = Array.prototype.map.call(container, x => {
return {
title: x.querySelector(".title").innerText,
price: x.querySelector(".price").innerText,
description: x.querySelector(".description").innerText,
quantity: x.querySelector(".orderQuantity").innerText
}
})

Transition between 3 different classes

I would like my website to transition between showing the three different sets of text below but I don't know where to start. The idea is it will initially say:
Your
Charity
365 Partner
then it will swap to:
Your
Education
365 Partner
If anyone could help guide me in the right direction, thank you.
<section>
<div class="containerBody">
<div class="BodyImages">
<div class="banner-top-mob d-lg-none"><img src="/images/BannerImage1.jpg" class="img-fluid"></div>
<div class="banner-bottom-mob d-lg-none"><img src="/images/BannerImage2.jpg" class="img-fluid"></div>
</div>
<div class="tes-banner__slider p-4 mt-4 mt-md-0 pb-xl-8">
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Charity</span><br>
365 Partner
</h2>
<p>We've been implementing Microsoft Dynamics 365 into not-for-profit organisations and the public sector for decades. As a result, our team of experts really do understand the complexities and challenges that you face as a sector.</p>
Discover
</div>
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Education</span><br>
365 Partner
</h2>
<p>Schools and academies are small businesses, which need robust financial systems. We offer you the ideal solution to manage the end-to-end operations of your school or academy.</p>
Find out more
</div>
<div class="tes-banner__content p-1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Commercial</span><br>
365 Partner
</h2>
<p>Whatever your industry sector, the pace of business is constantly changing. Dynamics 365 allows you to streamline your processes, make smarter decisions and accelerate business growth, all the while connecting all key parts of your organisation.</p>
Get in touch
</div>
</div>
</div>
</section>
You need to add JavaScrip to make it work. Using the setInterval, you can make the function run every couple seconds.
var sections = [
document.getElementById("section1"),
document.getElementById("section2"),
document.getElementById("section3")
]
var on = 0
setInterval(function() {
sections[on].style.display = "none"
on += 1
if (on == sections.length) {
on = 0
}
sections[on].style.display = "block"
}, 1000) // The number is the time (in milliseconds) for each flip
#seciont1 {
display: block;
}
#section2,
#section3 {
display: none;
}
<section>
<div class="containerBody">
<div class="BodyImages">
<div class="banner-top-mob d-lg-none"><img src="/images/BannerImage1.jpg" class="img-fluid"></div>
<div class="banner-bottom-mob d-lg-none"><img src="/images/BannerImage2.jpg" class="img-fluid"></div>
</div>
<div class="tes-banner__slider p-4 mt-4 mt-md-0 pb-xl-8">
<div class="tes-banner__content p-1" id="section1">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Charity</span><br> 365 Partner
</h2>
<p>We've been implementing Microsoft Dynamics 365 into not-for-profit organisations and the public sector for decades. As a result, our team of experts really do understand the complexities and challenges that you face as a sector.</p>
Discover
</div>
<div class="tes-banner__content p-1" id="section2">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Education</span><br> 365 Partner
</h2>
<p>Schools and academies are small businesses, which need robust financial systems. We offer you the ideal solution to manage the end-to-end operations of your school or academy.</p>
Find out more
</div>
<div class="tes-banner__content p-1" id="section3">
<h2 class="mb-3">
Your<br>
<span class="banner-title">Commercial</span><br> 365 Partner
</h2>
<p>Whatever your industry sector, the pace of business is constantly changing. Dynamics 365 allows you to streamline your processes, make smarter decisions and accelerate business growth, all the while connecting all key parts of your organisation.</p>
Get in touch
</div>
</div>
</div>
</section>
Change the 1000 to change the amount of time between each flip. It is in milliseconds, so 1000 is equal to 1 second.

Horizontal history timeline carousel with grouped dates using Flickity and Vanilla JS

I am trying to use the Flickity library to create a horizontal history timeline carousel. I have the basics working with data attributes, but am stuck on implementing data-nav and data-nav-title functionality. This functionality would be used to sync the .carousel-cell in the .carousel-nav with the associated .carousel-cell in the .main-carousel.
For example, the .carousel-nav .carousel-cell 1984-1988 would remain visible in the carousel until all of the associated 1984-1988 slides have been clicked/tapped/scrolled through by the user.
The following code sample details how the structure is currently set.
I have tried using "asNavFor": ".carousel-nav" and "asNavFor": ".main-carousel" in the respective DIVs with no success. I have also tried removing title from the data-nav-title attribute, but that did not work either.
Any suggestions or tips are greatly appreciated.
.carousel-container {
max-width: 1040px;
margin: 0 auto;
background-color: #f7f7f7;
overflow: hidden;
}
.carousel-nav .carousel-cell {
display: inline-block;
width: 100%;
height: 60px;
}
.carousel-nav .carousel-cell.is-selected {
font-weight: bold;
color: #A4475B;
}
.carousel-nav .end-year {
position: absolute;
top: 0;
right: 0;
}
.main-carousel .carousel-cell {
width: 100%;
}
.carousel-card p {
width: 50%;
min-width: 400px;
margin: 0 10px 0 0;
padding: 0;
background-color: #f7f7f7;
}
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<div class="carousel-container">
<div class="carousel-nav flickity-enabled" tabindex="0" data-flickity='{"asNavFor": ".main-carousel", "pageDots": false, "prevNextButtons": false, "draggable": false, "contain": true}'>
<div class="carousel-cell" data-nav="1984-1988">
<span class="start-year">1984</span>
<span class="end-year">1988</span>
</div>
<div class="carousel-cell" data-nav="1989-1992">
<span class="start-year">1989</span>
<span class="end-year">1992</span>
</div>
<div class="carousel-cell" data-nav="1993-1999">
<span class="start-year">1993</span>
<span class="end-year">1999</span>
</div>
<div class="carousel-cell" data-nav="2000-2002">
<span class="start-year">2000</span>
<span class="end-year">2002</span>
</div>
<div class="carousel-cell" data-nav="2003-2005">
<span class="start-year">2003</span>
<span class="end-year">2005</span>
</div>
<div class="carousel-cell" data-nav="2006-2012">
<span class="start-year">2006</span>
<span class="end-year">2012</span>
</div>
<div class="carousel-cell" data-nav="2013-2020">
<span class="start-year">2013</span>
<span class="end-year">2020</span>
</div>
</div>
<div class="main-carousel flickity-enabled is-draggable" data-flickity='{"pageDots": false}'>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Medicine River Wildlife Centre (MRWC) began in the basement and barn of a rental property with no thought of a long-term plan. The vision was that a few wild animals might come to the Red Deer SPCA each year and MRWC could help to care for them
in the founder’s (Carol Kelly) rented home.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Wildlife Rehabilitation was a relatively new concept in Alberta and although MRWC had many supporters, there were others who questioned it, criticized the efforts, and some were outright against it. Fundraising was exceedingly difficult. Very
few people wanted to give to something they didn’t understand. The facility, vehicle, labour and many supplies came from Carol and her family. The children’s playroom became an intensive care room and the barn served as a flight area.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>The first year saw 14 patients, admitted mostly through Red Deer Department of Fish and Wildlife (F & W).</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>For the first 2 years, MRWC was not allowed to advertise as a "wildlife" hospital but had to call themselves an “animal” hospital.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>By the third year, MRWC was given permission to call themselves a wildlife hospital. The Red Deer Advocate did a one-page article on the Centre and the patient load increased to 284 the following year.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>Carol contacted numerous organizations and people to help increase her knowledge and create a network, including Calgary Zoo, F & W biologists, Morris Flewwelling, Kerry Wood Nature Centre, Coaldale Birds of Prey Centre, and many more. She
joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1984-1988">
<div class="carousel-card">
<p>1984-1988</p>
<p>She joined two international wildlife rehabilitation organizations and began attending conferences.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1989-1992">
<div class="carousel-card">
<p>1989-1992</p>
<p>In 1989 a Banff Park Warden offered to sell the current home quarter to MRWC for $50,000. With the help of Morris Flewwelling, three co-signers were found who helped secure a $15,000 loan as a down payment. The landowner carried the balance as
a mortgage and the Centre began to build a permanent facility.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="1993-1999">
<div class="carousel-card">
<p>1993-1999</p>
<p>A four section, large raptor cage was built with donated labour and materials for recovering birds of prey. This cage took some months to build as it utilized with mostly donated time and labour.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2000-2002">
<div class="carousel-card">
<p>2000-2002</p>
<p>MRWC entered a dark time in its growth when the bank’s head office began a foreclosure. Daily phone calls continually pressured the Centre staff for the money.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2003-2005">
<div class="carousel-card">
<p>2003-2005</p>
<p>Through a great deal of hard work and a growing number of supporters, the debt was brought down from $443,000 to $150,000.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2006-2012">
<div class="carousel-card">
<p>2006-2012</p>
<p>Things took a new turn for the Centre when the idea of unpaid staff was introduced in 2006. Accepting International volunteers as summer staff increased the workforce while reducing operational cost. There was a steep learning curve to develop
protocols to guide and teach 15 young people each summer, but the benefits outweighed the work.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
<div class="carousel-cell" data-nav-title="2013-2020">
<div class="carousel-card">
<p>2013-2020</p>
<p>The City of Red Deer voted to provide MRWC with an annual payment of $25,000 for the work done to help injured wildlife, assist with wildlife conflict and provide education to the city.</p>
</div>
</div>
</div>
</div>

JQuery Event Method To Affect One Element of A Class

I can't seem to separate out an event method to effect just one specific element within a larger class.
Goal: When user changes value in input box for number of nights, the total price changes (only for that specific input). Currently, all classes are being altered simultaneously. I believe .find or .closest is the trick, but am unsure how to implement. here's the .js.
//nights auto multiply price
$(".cashtotal").prepend("$");
$('.nights').on('keyup change', function() {
var nights = +$(this).val();
var dailyPrice = +$(this).closest(".tour").data("daily-price");
$(".cashtotal").text(nights * dailyPrice);
$(".nights-total").text(nights);
$(".cashtotal").prepend("$");
});
and an example from the html
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100">
<h2 class="title">Idlehour, Angeles National Forest</h2>
<div class="info">
<div class="description">A pleasant trail through red fir forest with access to different
lake basins and the Yosemite Creek watershed.</div>
<div class="nightsnum">
<p>
<label for="nights">Number of Nights</label>
</p>
<p>
<input type="number" value="3" class="nights">
</p>
</div>
<div class="total">
<p><span class="cashtotal">400</span><br> for <span class="nights-count">3</span> Nights</p>
</div>
</div>
//nights auto multiply price
$(".cashtotal").prepend("$");
$('.nights').on('keyup change', function() {
var $thisTour = $(this).closest(".tour");
var nights = $(this).val();
var dailyPrice = $thisTour.data("daily-price");
$(".cashtotal", $thisTour).text("$" + nights * dailyPrice);
$(".nights-total", $thisTour).text(nights);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I can't seem to separate out an event method to effect just one specific element within a larger class.
Goal: When user changes value in input box for number of nights, the total price changes (only for that specific input). Currently, all classes are being altered simultaneously. I believe .find or .closest is the trick, but am unsure how to implement. here's the .js. -->
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="100">
<h2 class="title">Idlehour, Angeles National Forest</h2>
<div class="info">
<div class="description">A pleasant trail through red fir forest with access to different lake basins and the Yosemite Creek watershed.</div>
<div class="nightsnum">
<p>
<label for="nights">Number of Nights</label>
</p>
<p>
<input type="number" value="1" class="nights">
</p>
</div>
<div class="total">
<p><span class="cashtotal">100</span>
<br>for <span class="nights-total">1</span> Nights</p>
</div>
</div>
</div>
<div class="col-md-4 socal tour panel panel-default" data-discount="99" data-daily-price="200">
<h2 class="title">Another forest</h2>
<div class="info">
<div class="description">another tour.</div>
<div class="nightsnum">
<p>
<label for="nights">Number of Nights</label>
</p>
<p>
<input type="number" value="1" class="nights">
</p>
</div>
<div class="total">
<p><span class="cashtotal">200</span>
<br>for <span class="nights-total">1</span> Nights</p>
</div>
</div>
</div>
The question is worded in a way where the person giving the answer needs to interpret it. This is my interpretation. I am assuming that there are multiple tours. When you change one tour it changes all the ".nights-total" and ".cashtotal" classes. What you can do to solve this issue is use a context for the selector. In this case it is the tour that is the container that is the context for each ".nights-total" and ".cashtotal" class. If I have made the wrong assumptions please update your question in a clearer meaning. Hope this helps.

how to check for 2 conditions within a hover function

I have a quiz page that asks a question and the user is to check 3 appropriate checkboxes as his or her answer (out of a list of 6 checkboxes). Then the user is to check his/her answers by hovering over the answer button ('#check-answer-btn')
If the user hovers over the $('#check-answer-btn') with less than 3 checkboxes checked, I want a certain alert $('.alert-box2') to fadeIn.
So my question is, can I have two conditionals within one hover function? I'm posting the code I have tried to no avail. Can someone help me find a solution? Thanks.
$('#check-answer-btn').hover(function(e){
var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
if (checkboxes < 3) {
$('.alert-box2').fadeIn(200);
}, $('.alert-box2').stop().fadeOut(200);
else if (checkboxes >= 3) {
$('#checkbox-fadebox').fadeIn(200);
}, $('#checkbox-fadebox').stop().fadeOut(200);
);
I thought the HTML might be too much but here it is:
<p style="width:675px; margin:15px 0 20px 0;">Please choose the best answer for each of the following questions. <br>After you've selected your answer, roll over the <span class="bold">Check Answer</span> button.</p>
<div class="quiz-25a question1 inline vertical" style="margin:15px 0 0 0;">
<p class="bold float-left">1.</p><span class="bold float-left" style=" width:640px; margin:0 0 10px 10px;">Indicators are why the claim rep referred this questionable claim to you as an investigator.</span>
<div class="clear"></div>
<input id="quiz-25a-1a" type="radio" name="quiz-25a-1a" value="a"><p class="float-left" style="margin:0 12px;">a.</p><span>True</span>
<div class="clear"></div>
<input id="quiz-25a-1b" type="radio" name="quiz-25a-1b" value="b"><p class="float-left" style="margin:0 12px;">b.</p><span>False</span>
<div class="clear"></div>
<button id="answer-btn1" class="answer-btn"></button>
</div><!-- end quiz-25a question1 inline vertical -->
<form class="chbx-25a inline vertical" style="margin:15px 0 0 0;">
<p class="bold float-left">2.</p><span class="bold float-left" style=" width:640px; margin:0 0 10px 10px;">Identify 3 reasons included in the following list that are reasons for creating a vehicle theft insurance fraud scheme.</span>
<div class="clear"></div>
<label for="chbx-25a-2-1"><input id="chbx-25a-2-1" type="checkbox"><span class="bold float-left">A.</span><span>There is no work number for either Bob or Jane Field’s in the claim file.</span></label>
<label for="chbx-25a-2-2"><input id="chbx-25a-2-2" type="checkbox"><span class="bold float-left">B.</span><span>The vehicle had 8400 miles on it at the time of the theft.</span></label>
<label for="chbx-25a-2-3"><input id="chbx-25a-2-3" type="checkbox"><span class="bold float-left">C.</span><span>The theft happened in the middle of the day, downtown with no witnesses.</span></label>
<label for="chbx-25a-2-4"><input id="chbx-25a-2-4" type="checkbox"><span class="bold float-left">D.</span><span>Mrs. Fields parked the car one door down from Betty’s.</span></label>
<label for="chbx-25a-2-5"><input id="chbx-25a-2-5" type="checkbox"><span class="bold float-left">E.</span><span>The vehicle had a premium sound system.</span></label>
<label for="chbx-25a-2-6"><input id="chbx-25a-2-6" type="checkbox"><span class="bold float-left">F.</span><span>The vehicle had an anti-theft alarm that no one heard.</span></label>
</form><!-- end chbx-25a inline vertical -->
<button id="check-answer-btn" class="check-answers-btn"></button>
<p style="margin-top:15px;">Click NEXT to continue.</p>
<div id="answer1" class="fade-box absolute" style="width:340px; height:105px; top:150px; left:270px;">
<p class="answer-title bold">The correct answer is a, true.</p>
<p class="font-size14">Indicators of a questionable claim are inconsistencies in a claimant’s story, they don’t make sense in the over-all big picture. As these indicators mount up, it becomes more important to investigate the claim.</p>
</div><!-- end answer1 -->
<div id="checkbox-fadebox" class="fade-box absolute" style="text-align:center; width:410px; height:470px; top:65px; left:235px;">
<p class="bold italic" style="font-size:16rpx; margin-top:5px;">The following indicators of vehicle theft insurance fraud apply to this case.</p>
<img src="img/25b-chbx-ans.gif" alt="" style="margin:12px 0 0 0;"/>
</div><!-- end checkbox-fadebox -->
<div class="alert-box absolute">
<p>Please select the best answer(s)<br> for <span style="text-decoration:underline;">each</span> of the following questions.</p>
<img class="OK-btn absolute pointer" style="display:block; bottom:6px; right:6px;" src="img/OK-btn.gif" />
</div>
<div class="alert-box2 absolute">
<p>Please identify 3 reasons for creating a vehicle theft insurance fraud scheme.</p>
</div>
I found my answer by discovering errors in my own syntax and breaking the conditionals into two separate ones. I realized that the value I assigned to my variable "checkboxes" was different than the one found in my HTML (.chbx-25b and .chbx-25a). Also, the first curly braces used after each of the "ifs" are incorrect. I have posted the successful block of code below. Thanks to all who attempted to help!
$('#check-answer-btn').hover(function(){
var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
if(checkboxes === 3)
$('#checkbox-fadebox').fadeIn();
}, function(){
$('#checkbox-fadebox').stop().fadeOut();
});
$('#check-answer-btn').hover(function(){
var checkboxes = $('.chbx-25b input[type="checkbox"]:checked').length;
if(checkboxes!== 3)
$('.alert-box25b').fadeIn();
}, function(){
$('.alert-box25b').stop().fadeOut();
});

Categories