JQuery Event Method To Affect One Element of A Class - javascript

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.

Related

Using jquery/javascript: How to remove whitespaces and keep breaks without being able to edit the html

I've tried to implement the solution of this site but that didn't work, I have tried many things to try to solve my issue. In my code below that'st he closet I can get and even then it's not what I'm after.
Trying to achieve:
I'm copying html from a div and placing it inside of a textrea.
I strip the html but keep the line breaks.
However due to the html being used from a third party site, I have no control over the way the 'html' is structed. As in the extra spaces seen in the code. The following code should be nice and neat in the textarea and look like:
Textarea data should be formated to look like:
Product details:
Item Number: 000800209270
Brand: Nikon
Model Number: D3500
Colour: Black
Number of Lenses: 2
This Nikon D3500 camera body comes with
Nikon 18-55mm 1:3.5-5.6G VR Lens
Nikon 70-300mm 1:4.5-6.3G ED VR Lens
1 battery & charger.
Shutter count: 426
The camera and both lens are in perfect working order, and is showing hardly any visible wear (please see photos).
For more information on this or any other item you may have seen please feel free to send me an email and I will respond as soon as possible.
function strip() {
$("#pstad-descrptn").text($('#item-info-container').text());
setTimeout(
function() {
jQuery.fn.cleanWhitespace = function() {
this.contents().filter(
function() { return (this.nodeType == 3 && !/\S/.test(this.nodeValue)); })
.remove();
return this;
}
$('#item-info-container').cleanWhitespace();
$('#pstad-descrptn').cleanWhitespace();
}, 200 );
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="thebutton" value="strip" onclick="strip();">
<textarea id="pstad-descrptn" name="description" data-val="true" cols="78" rows="20"></textarea>
<div id="item-info-container" class="clipboard copied re-copy" data-clipboard-target="#item-info-container">
<div id="item-pre-description">
<h2 class="h5">Product details:</h2> <div class="product-details__columns"> <p class="product-details__column"> <strong>Item Number:</strong> <span id="product-unique-id">000800209270</span> </p> <p class="product-details__column"> <strong>Brand:</strong> <span>Nikon</span> </p> <p class="product-details__column"> <strong>Model Number:</strong> <span>D3500</span> </p> <p class="product-details__column"> <strong>Colour:</strong> <span>Black</span> </p> <p class="product-details__column"> <strong>Number of Lenses:</strong> <span>2</span> </p> </div> </div>
<div id="item-description">
This Nikon D3500 camera body comes with<br><br>Nikon 18-55mm 1:3.5-5.6G VR Lens<br>Nikon 70-300mm 1:4.5-6.3G ED VR Lens<br>1 battery & charger.<br><br>Shutter count: 426<br><br>The camera and both lens are in perfect working order, and is showing hardly any visible wear (please see photos).<br><br>For more information on this or any other item you may have seen please feel free to send me an email and I will respond as soon as possible.<br><br> </div>
</div>
I'm at my wits end I've tried so many 'white-space' removing techniques, javascript and css to no prevail. Please someone save me from my misery. Thanks a million!
You can simply use innerText
function strip() {
document.querySelector('#pstad-descrptn').value =
document.querySelector('#item-info-container').innerText
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="thebutton" value="strip" onclick="strip();">
<textarea id="pstad-descrptn" name="description" data-val="true" cols="78" rows="20"></textarea>
<div id="item-info-container" class="clipboard copied re-copy" data-clipboard-target="#item-info-container">
<div id="item-pre-description">
<h2 class="h5">Product details:</h2> <div class="product-details__columns"> <p class="product-details__column"> <strong>Item Number:</strong> <span id="product-unique-id">000800209270</span> </p> <p class="product-details__column"> <strong>Brand:</strong> <span>Nikon</span> </p> <p class="product-details__column"> <strong>Model Number:</strong> <span>D3500</span> </p> <p class="product-details__column"> <strong>Colour:</strong> <span>Black</span> </p> <p class="product-details__column"> <strong>Number of Lenses:</strong> <span>2</span> </p> </div> </div>
<div id="item-description">
This Nikon D3500 camera body comes with<br><br>Nikon 18-55mm 1:3.5-5.6G VR Lens<br>Nikon 70-300mm 1:4.5-6.3G ED VR Lens<br>1 battery & charger.<br><br>Shutter count: 426<br><br>The camera and both lens are in perfect working order, and is showing hardly any visible wear (please see photos).<br><br>For more information on this or any other item you may have seen please feel free to send me an email and I will respond as soon as possible.<br><br> </div>
</div>
I want the pre-description to be a block of code with no spaces only line breaks.
You then need to separate the paragraphs and combine them
(and eliminate double line ending at first paragraph)
function strip() {
let item_pre_desc = document.querySelector('#item-pre-description')
let item_desc = document.querySelector('#item-description')
let result = document.querySelector('#pstad-descrptn')
result.value =
item_pre_desc.innerText.replace(/\n+/g,'\n')
+ '\n'
+ item_desc.innerText
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" id="thebutton" value="strip" onclick="strip();">
<textarea id="pstad-descrptn" name="description" data-val="true" cols="78" rows="20"></textarea>
<div id="item-info-container" class="clipboard copied re-copy" data-clipboard-target="#item-info-container">
<div id="item-pre-description">
<h2 class="h5">Product details:</h2> <div class="product-details__columns"> <p class="product-details__column"> <strong>Item Number:</strong> <span id="product-unique-id">000800209270</span> </p> <p class="product-details__column"> <strong>Brand:</strong> <span>Nikon</span> </p> <p class="product-details__column"> <strong>Model Number:</strong> <span>D3500</span> </p> <p class="product-details__column"> <strong>Colour:</strong> <span>Black</span> </p> <p class="product-details__column"> <strong>Number of Lenses:</strong> <span>2</span> </p> </div> </div>
<div id="item-description">
This Nikon D3500 camera body comes with<br><br>Nikon 18-55mm 1:3.5-5.6G VR Lens<br>Nikon 70-300mm 1:4.5-6.3G ED VR Lens<br>1 battery & charger.<br><br>Shutter count: 426<br><br>The camera and both lens are in perfect working order, and is showing hardly any visible wear (please see photos).<br><br>For more information on this or any other item you may have seen please feel free to send me an email and I will respond as soon as possible.<br><br> </div>
</div>

Javascript in userscript/tampermonkey/greasemonkey form to perform math on HTML values

I am trying to write a script in tampermonkey that prints/inserts a value calculating the $ per sq ft. (Price/Total Sq Ft.) of each listing in a list like this. I have no javascript experience:
Screen Shot Example
Webpage:
http://www.utahrealestate.com/search/map.search
Relevant portion of HTML (one of the listings:)
<div id="mls-inline-1420899" class="listing_container">
<div class="listing-wrapper-table">
<div class="listing-wrapper-row">
<div class="listing-container-desktop">
<div class="listing-wrapper-cell">
<img src="http://assets.utahrealestate.com/photos/280x210/1420899_6faef96a263f4613b6b300cc915a9767_710733.jpg" class="listing-img" alt="MLS #1420899 Photo">
</div>
<div class="listing-wrapper-cell aligned-top">
<div class="inline_info">
<p class="status">
<i class="icon icon-circle status-1"></i> Active </p>
<h3>$249,000</h3>
<div class="list-info-content">
135 S 300 E <br>
Provo, UT 84606 </div>
<div class="list-info-content">
5 bds •
2.00 ba •
2026 sqft<br>
Built: 1914 • MLS #: 1420899 </div>
<p class="inline_agent">Agent: Chase Leavitt</p>
<p class="inline_brokerage">RE/MAX Equity</p>
</div>
</div>
</div>
<div class="listing-container-handheld">
<img id="img_1420899" class="listing-img" src="http://assets.utahrealestate.com/photos/640x480/1420899_6faef96a263f4613b6b300cc915a9767_710733.jpg" alt="MLS #1420899 Photo">
<div class="listings-info" style="display: block;">
<div class="listings-info-left-col">
<span>$249,000</span>
<p class="listing-address">135 S 300 E</p>
<p class="listing-address-csz">Provo, UT 84606</p>
</div>
<div class="listings-info-right-col">
<div class="border"><span>5</span><br>Beds</div>
<div class="border"><span>2.00</span><br>Baths</div>
<div class="end"><span>2026</span><br>Sq.Ft.</div>
<p>#1420899</p>
</div>
<p class="inline_brokerage">RE/MAX Equity</p>
</div>
</div>
</div>
</div>
</div>
I wrote a list of things that I need to accomplish to make this happen:
Javascript to grab the value of each listing and put it in a
variable
Javascript to grab the sq footage of each listing while excluding the uneeded info in the same div
Javascript to divide those variables and store result in a $perSqFt variable
Javascript to output that new value along with the original data
Loop for all of the listings doing the same as above.
Here is what I have so far. Feel free to offer any pointers, links, or advice. I am just updating this as I go. Thank you for helping!
(#1) The value for each listing is within a h3 tag. I am thinking that I will need to use find to get the value of the h3 tag:
.find('h3')
(#4) I am thinking I can use appendChild to output the new value next to the original sq ft value. Still working on this:
document.getElementById('list-info-content').appendChild(dollarPerSqFt);
(#5) The beginnings of a loop through .list-info-content classes:
var find_class = document.getElementsByClassName('list-info-content');
for (var i = 0, i++) {
find_class[i].innerHTML = {do something to} find_class[i].innerHTML ;
}

My js pagination code is not working, completely lost as to what is causing it

I have a pagination set up that I have used many time before... works great for lists and simple paragraphs, but I am unable to get it to work with a more complex html code, which is listed below. For some reason, the js refuses to turn the below code into a set object in order to paginate.
<div class="properties-content">
<div id="paging_container8" class="container">
<div class="storybody">
<p>
<!---------- Property Start ---------->
<article class="hentry">
<div class="property-featured"> <a class="content-thumb" href="property-details.html"> <img src="images/property/property3.jpg" alt=""> </a> <span class="property-label last">Last one left</span> <span class="property-category">Single Family Home </span> </div>
<div class="property-wrap">
<h2 class="property-title"> Single Family Residential, NJ </h2>
<div class="property-excerpt">
<p>Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings...</p>
<p class="property-fullwidth-excerpt">Classic 60's ranch living. House has hardwood floors and hard coat plaster walls and ceilings in good condition. Intimate backyard for private gatherings. Full basement...</p>
</div>
<div class="property-summary">
<div class="property-detail">
<div class="size"> <span>1118 sqft</span> </div>
<div class="bathrooms"> <span>2</span> </div>
<div class="bedrooms"> <span>3</span> </div>
</div>
<div class="property-info">
<div class="property-price"> <span> <span class="amount">$299,000</span> </span> </div>
<div class="property-action"> More Details </div>
</div>
<div class="property-info property-fullwidth-info">
<div class="property-price"> <span><span class="amount">$299,000</span> </span> </div>
<div class="size"><span>1118 sqft</span> </div>
<div class="bathrooms"><span>2</span> </div>
<div class="bedrooms"><span>3</span> </div>
</div>
</div>
</div>
<div class="property-action property-fullwidth-action"> More Details </div>
</article>
<!---------- Property End ---------->
<!---------- Property End ---------->
</p>
<div class="page_navigation"></div>
I need, due to how my css is, to show 2 of the above code snippet out of maybe 25. And here is my javascript that I am using:
<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
{
if(x==0){
txt=txt+substr[x];
}
else{
txt=txt+"</li><li>"+substr[x];
}
}
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);
$(document).ready(function(){
$('#paging_container8').pajinate({
num_page_links_to_display : 2,
items_per_page : 1 ,
item_container_id : '.storycontent'
});
});
​</script>
And here is the jsfiddle: http://jsfiddle.net/moLwmyyr/1/
I have figured it out!
The following js, along with the js in the fiddle, work with my html code in my question. Instead of the original js which only worked for simple lists, tables, and paragraphs, the js listed here will work on nested html code.
(function($){
$(document).ready(function(){
$(".pagination").customPaginate({
itemsToPaginate : ".post"
});
});
})(jQuery)
http://jsfiddle.net/moLwmyyr/2/
Works perfectly with my site and css. Hope this helps others.

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();
});

I want the station name to be changed when user clicks play button

I have the fiddle all ready to go I just need help with the jquery/javascript part. What I want is to have the record name/station title change when the user clicks on the play button they find on hovering over the album cover. I also want the record/vinyl in the "player" box to start spinning. Right now it spins on hover but I want to change that.
Here is the fiddle http://jsfiddle.net/7txt3/1/
and here is just the html code because the css is kinda long!
<div class="grid_12">
<div class="grid_6 alpha"><!-- record, overflow:hidden -->
<div id="player">
<div id="recordbox">
<div class="record2">
</div>
</div>
<div class="bars-box">
<div class="player-box">
<div id="title-player">Now playing:</div><br><strong><span class="player-station">Groove Salad</span></strong>
<div class="bars">
<div class="bar-1"></div>
<div class="bar-2"></div>
<div class="bar-3"></div>
<div class="bar-4"></div>
<div class="bar-5"></div>
<div class="bar-6"></div>
<div class="bar-7"></div>
<div class="bar-8"></div>
<div class="bar-9"></div>
<div class="bar-10"></div>
</div>
</div>
</div>
</div>
<div class="grid_3">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">A nicely chilled plate of ambient/downtempo beats and grooves.</p>
<a class="play" href="#">Play</a>
</div>
<div class="salad"><!-- sleeve -->
<h3>Groove Salad</h3>
</div>
</div>
</div>
<div class="grid_3 omega">
<div class="album">
<div class="record">
</div>
<div class="recordsinfo"><p class="recordinfo">Sensuous and mellow vocals, mostly female, with an electronic influence.</p>
<a class="play" href="#">Play</a>
</div>
<div class="lush"><!-- sleeve -->
<h3>Lush</h3>
</div>
</div>
</div>
Something like this?
$(function(){
var station = $('.player-station');
$('.play').click(function(){
station.text($(this).closest('.album').find('h3').text());
});
});
Demo: http://jsfiddle.net/7txt3/3/
For spinning you can use: http://code.google.com/p/jqueryrotate/
So, first thing is first... you need to read up on the use of an ID versus the use of a Class. To put it a bit simply:
ID = Unique identifier for an element
Class = Identifier for a series of elements
The reason I bring this up is because you have odd naming conventions like class="lush" which don't make sense. That should be an id, and the class should be something like "sleeve".
Anyway, here's the updated code and fiddle. Yes, you can make it a bit more condensed (not set a var for the title), but I wanted to spread it out so you could see the code a little better. If you have questions, let me know.
$('a.play').click(function() {
var title = $(this).closest('.album').find('.album-title');
$('span.player-station').text($(title).text());
});​
I also added a class to the h3 tags, just so you didn't run into any issues down the road:
<h3 class="album-title">Lush</h3>
Here's the fiddle:
http://jsfiddle.net/7txt3/4/

Categories