It's similar to this topic but not working.
Here my codes:
<span class="main_price">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
By default "main_price" and "option_price" class is visible and "option_price_value" class is visible where has the options.
Now I'm trying to hide "main_price" when "option_price_value" is visible.
For more clear,
When has no options by default it's showing
<span class="main_price">
$50
</span>
<span class="option_price">
</span>
And when options available it should look like
<span class="main_price" style="display:none;">
$50
</span>
<span class="option_price">
<span class="option_price_value">
$70
</span>
</span>
EDITED to include jquery, my fiddle is working now. Check this new version out: https://jsfiddle.net/cbbs2oms/3/
Basically checking if there's any text in the option span and showing the main price only if there's not option value. Let me know if I've misunderstood.
$(".option_price_value").each(function(){
if ($(this).text().trim().length) {
$('.main_price').hide();
console.log('has option');
} else {
$('.main_price').show();
console.log('has no option');
}
});
Related
I want to use JavaScript to select the span element with a class of "price", but the selection has to be with the parent span with id "product-price-895". Additionally, I want to use a wildcard for the number part of the ID, so the selector has to be something like "#product-price-*"
<span id="product-price-895" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper " >
<span class="price">€ 12,95</span>
</span>
You can use the following CSS selector: [id^=product-price] > .price.
The selector uses a child combinator which means it is only concerned with elements having the class of price that are an immediate child of any element whose id attribute begins with "product-price" (due to the attribute selector).
var spanEls = document.querySelectorAll('[id^=product-price] > .price');
spanEls.forEach(span => console.log(span.innerHTML));
<span id="product-price-1" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 12,95</span>
</span>
<span id="product-price-2" data-price-amount="5.50" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 5,50</span>
</span>
<span id="product-price-3" data-price-amount="25.90" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 25,90</span>
</span>
jQuery selectors can handle this fairly easily: https://api.jquery.com/category/selectors/
If you need to use vanilla JavaScript, you can use document.querySelector(): https://www.w3schools.com/jsref/met_document_queryselector.asp
If you want the child with the class "price" from the node with the id "product-price-895", you need to use the following css selector: #product-price-895 > .price.
In javascript I would use: document.querySelector('#product-price-895 > .price').
A more efficient way may be to use an attribute selector instead of the ID. You could search by document.querySelectorAll("[data-price-amount] > .price") or document.querySelectorAll("[data-price-type="finalPrice"] > .price"). This will also give you a bit more control and flexibility if the way your IDs get generated changes in the future.
To get all the spans with the class price where the parent starts with product-price- you could use an attribute starts with selector ^=
$("span[id^=product-price-] span.price")
document.querySelectorAll('span[id^=product-price-] span.price').forEach(x => console.log(x.innerHTML))
<span id="product-price-895" data-price-amount="12.95" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">€ 12,95</span>
<span class="price">€ 13,95</span>
<span class="prices">€ 14,95</span>
<span class="price">€ 15,95</span>
<span><span class="price">€ 18,95</span></span>
</span>
<span class="price">€ 16,95</span>
I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
Thanks in advance
Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.
// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));
// Loop over the array
buttons.forEach(function(btn){
// Set up a click event handler
btn.addEventListener("click", function(evt){
// Print out some identifying information about the clicked element
console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
});
});
<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
</div>
<span class="v-button-wrap">
<span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>
The issue I am having is that I am trying to assign keyboard focus to a bootstrap "active" class using jQuery. The goal is to allow accessibility users who select from a drop menu to go directly to the selected item, and skip the rest.
jQuery:
$(document).ready(function () {
$('span').find('.active').focus
});
HTML:
<div class="col-xs-12 ApplicationSubtabs" style="height:auto">
<span class="Subtab NoteTab" style="z-index:2;height:auto;">
<span id="NotesBtn">Notes</span>
</span>
<span class="Subtab DetailTab">
<span id="InfoBtn" class="subTabAction">Details</span>
<span id="DurationBtn" class="subTabAction">Duration</span>
<span id="POCList" class="subTabAction">Points of Contact</span>
#if (Model.AdditionalLocations.Count > 1)
{
<span id="AdditionalLocationsBtn" class="subTabAction">Additional Locations</span>
}
</span>
<span class="Subtab RequirementTab" style="z-index:2;height:auto;">
<span id="EligiblePrograms" class="subTabAction"> Eligible Programs</span>
<span id="RateInfo" class="subTabAction">Tuition Rate Info</span>
<span id="CurrentRates" class="subTabAction">Institution Tuition Rates</span>
<span id="CurrentInstitutionFees" class="subTabAction">Institution Fees</span>
<span id="CurrentOtherExpensesPolicy" class="subTabAction">Other Expenses/Policy</span>
<span id="CurrentProgramRates" class="subTabAction" #if (!Model.HasProgrammaticRatesCurrent) { #Html.Raw("style='display:none'") }>Program-Specific Tuition Rates</span>
</span>
#if (Model.CurrentInstitutionTuitionRateHeaderId > 0)
{
<span class="Subtab AnnualRequirementTab subTabAction" style="z-index:2;height:auto;">
<span id="AnnualEligiblePrograms" class="subTabAction"> Eligible Programs</span>
<span id="AnnualRateInfo" class="subTabAction">Tuition Rate Info</span>
<span id="AnnualInstitutionRates" class="subTabAction">Institution Tuition Rates</span>
<span id="AnnualInstitutionFees" class="subTabAction">Institution Fees</span>
<span id="AnnualOtherExpensesPolicy" class="subTabAction">Other Expenses/Policy</span>
<span id="AnnualProgrampecificRates" class="subTabAction" #if (!Model.HasProgrammaticRatesAnnual) { #Html.Raw("style='display:none'") }>Program-Specific Tuition Rates</span>
</span>
}
</div>
find() should take a class as a selector and not active like an tag element and you also don't call the focus() on the first line. Try this:
$(document).ready(function () {
$('span').find('.active').focus();
});
Also, $(this('id')) is wrong, it should look like $(this) or $(this).attr('id'), but in this case I don't see the need of using $(this).
UPDATE:
For the click event handler you can use:
$('.subTabAction').on('click', function(){
$(this).find('.active').focus();
});
How do i wrap a div class div class="includingVAT"></div> around the string text :incl. MwSt
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
incl. MwSt
<span id="plus-shipping">plus-shipping</span>
</span>
using jquery?
it needs to look like this:
<span id="VariantPrice_3181">
<span class="variantprice">
<span class="pricelabel">Preis </span>
240,00 (CHF)
</span>
<div class="includingVAT"> incl. MwSt</div>
<span id="plus-shipping">plus-shipping</span>
</span>
the string without span or div needs the div class includingVAT as there could be different language translations.
You can try this example here: DEMO
var text = $('#plus-shipping').map(function(){
return this.previousSibling.nodeValue
});
$('#plus-shipping').prepend('<div class="includingVAT">' + text[0] + '</div>');
$(".pricelabel").after('<div class="includingVAT">');
$(".plus-shipping").before('</div>');
This is awkward and error-prone. Is there any-way you can insert the whole div? Why does incl. MwSt exist only in the HTML?
I'm trying to create a filtering system where the user can filter for answers using more than one category, but the user can't choose more than one option from each category, so upon clicking an option from any category, that category will fade out ... I have the following little problem, if the user clicks on another option from the same category while it's fading out, he will be able to choose two options from the same category ... How can I disable any click on the category when it's fading out ??
Here is the code I'm using:
HTML:
<div class="search-list" id="program-list">
<span class="search-title">Category 1</span>
<span data="program-list">Option 1</span>
<span data="program-list">Option 2</span>
<span data="program-list">Option 3</span>
<span data="program-list">Option 4</span>
<span data="program-list">Option 5</span>
<span data="program-list">Option 6</span>
</div> <!-- search-list -->
<div class="search-list" id="trainer-list">
<span class="search-title">Category 2</span>
<span data="trainer-list">Option 1</span>
<span data="trainer-list">Option 2</span>
<span data="trainer-list">Option 3</span>
<span data="trainer-list">Option 4</span>
</div> <!-- search-list -->
<div class="search-list" id="issue-date">
<span class="search-title">Category 3</span>
<span data="issue-date">Option 1</span>
<span data="issue-date">Option 2</span>
<span data="issue-date">Option 3</span>
<span data="issue-date">Option 4</span>
<span data="issue-date">Option 5</span>
<span data="issue-date">Option 6</span>
</div> <!-- search-list -->
JQuery:
$('.search-option').click(function(){
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});
I tried using the following JQuery code but it didn't work:
$('.search-option').click(function(e) {
e.preventDefault();
});
Thanks in advance...
You can set an indicator in your function:
$('.search-option').click(function(){
if(indicator) {
return false
}
...
}
The indicator is something set when the fade starts and clears when it ends. It could be:
a javascript variable,
or - you can check the current opacity,
or - or you can set/clear a class name during the fade.
Simply remove the 'search-option' class from all options in a category once it is clicked.
You can set the click event to null once it has fired:
$('.search-option').click(function(){
$(this).click(null); // set click to do nothing on the clicked element
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});
This will only turn off the click action on the specifically clicked element so your other filters will continue to work until each of them has been selected once. If you want to re-enable the click function after everything has happened you can save the function, disable it, then re-enable at the end as below:
$('.search-option').click(function(){
var fun = $(this).click;
$(this).click(null); // set click to do nothing on the clicked element
// OTHER CODE
$(this).click(fun);
});
Since this all hinges on the user clicking on an element with the class "search-option", just remove that class from the element and its siblings before starting the fade and then restore it with a callback after the fade runs. That way, nobody can click twice:
$('.search-option').click(function() {
var x = $(this).html();
$('#filtered-items').append(x);
$(this).parent().children().removeClass('search-option');
$(this).parent('.search-list').fadeTo('slow', 0, function() {
$(this).children().addClass('search-option');
});
});
Hey everyone ... I finally solved it, I had to change the whole structure of the function and use the methods "unbind" and "bind" ... Here is the solution if anyone is interested in it:
$('.search-option').click(work);
});
function work(){
var x = $(this).html();
$('#filtered-items').append(x);
$(this).unbind('click');
$(this).siblings('a').unbind('click');
$(this).parent('.search-list').fadeOut('slow');
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeIn('slow');
$('#'+$(this).attr('data')).children('a').bind('click',work );
$(this).remove();
});
};
Now the user can't choose more than one option at each category ....
Try:
$('.search-option').click(function(){
var x = $(this).html();
$('#filtered-items').append(x);
// ADDED LINES
$(this).parent('.search-list').find('a').each(function(){
$(this).click(function(){return false;});
});
// END: ADDED LINES
$(this).parent('.search-list').fadeTo('slow', 0);
$('#filtered-items > span').click(function(){
$('#'+$(this).attr('data')).fadeTo('slow', 100);
$(this).hide();
});
});