I am adding classes namely hide_some_features,show_some_features in each loop. Now i want to add class to feature_suffix having next only hide_some_features class. I tried with $(this).closest('.feature_suffix').addClass('test-class'); which is not working.
$('.variations_form input:radio[name=attribute_pa_1]').each(function() {
if (jQuery.inArray($(this).attr('data-feature-value'), disabledFetaureValue) < 0) {
$(this).closest('.cc-selector').addClass('hide_some_features');
$(this).closest('.feature_suffix').addClass('test-class');
} else {
$(this).closest('.cc-selector').addClass('show_some_features');
}
})
;
I want to add class to highlighted place
.closest() wont work here because the target element is not an ancestor of the element that fires the event. Use the below:
$(this).closest('.cc-selector').prev('.feature_suffix').addClass('test-class');
You can find the closest cc-selector, then see whether it has hide_some_features, if so then add the new class to its previous sibling
$(this).closest('.cc-selector').filter('.hide_some_features').prev('.feature_suffix').addClass('test-class');
Related
I am fresh with javascript. I want to write a code that always searches for a div class in a HTML file and if it finds a required class it assigns another class to my navigation. Here is what I managed to do, the code seems to say what I want but it doesn't work.
function myFunction(e) {
var element = document.getElementById('nav-verslui');
var div = document.querySelector('div');
if (div.classList.contains('privatiemsverslui-verslui999')); {
element.classList.add('active-verslui');
} else {
element.classList.remove('active-verslui');
}
};
If I were you, I would use the querySelector by passing the class directly to it and then check if it returns an element:
let div = document.querySelector(".privatiemsverslui-verslui999");
if (div == null) {
// There is no element with that class
}
else {
// The element exists.
}
The way you were doing it, it would have returned the first div in the DOM and checked if that single div had that class. It would'nt have looked through the whole document.
So I made this in Jquery:
Game Gallery
However I need to change it in Vanilla/ES6 and I'm a stuck on how to target the parents child on click and also find the index (.eq($(this).parent().index()) for other sections(copy and images section in my case):
My tryout was doing a for loop like:
const mode = document.querySelectorAll('.gamegallery span');
for (let i = 0; i < mode.length; i++) {
mode[i].onclick = function() {
this.parentNode.classList.toggle('active');
};
}
But it seems I'm missing something to get the parent to stay in sync with the icons because it sets .active but stays .active on all icons. I tried:
if {
this.parentNode.classList.add('active');
}
else {
this.parentNode.classList.remove('active');
}
Which does nothing...theres something else Im missing?
Lastly to also change a different section like the content/images I used:
$('.gamegallery .game-images img').eq($(this).parent().index()).addClass('active');
});
I basically need to do the same function all at once. Removing active to icons - content-images parents. Finding the first object and then go to the parents side and go to each index(which is the first one as default). node.parentNode.childNodes; is the one thing I found...I'll keep updating. Not asking to do it but more of what I'm missing from the code I added. Specifically the first part. Coming from a noob EcsMaScript/Modern Vanilla guy.
Rather than traversing the node hierarchy in search of the elements you want to toggle you can simplify it by specifying a target. This comes in handy if your clicked node's index doesn't match your intended target.
Checkout this Fiddle for a Demo
You can use the data- HTML attribute. For example: data-target=".xbox" could be applied to your span.circle element since that is what you're adding your click listener to.
<span class="circle" data-target=".xbox">
and add the class inside data-target to your, well, target:
<div class="swiper-slide xbox"></div>
and
<img src=".." class="xbox">
On click, you can pull your target from the element with: this.dataset and specify what you're looking for. In this case it is: const target = this.dataset.target.
With the target's selector found from the dataset we can find the elements with a selector:
const targets = document.querySelectorAll('.swipe-slider'+target+', .game-images '+target');
Once we have the target we can remove the current active class from our target's neighbors. In this case, though, I've simply removed it from all.
document.querySelectorAll('.swiper-slide, .game-images img').forEach(el => el.classList.remove('active'));
Then we add the active class with:
targets.forEach(target => target.classList.add('active');
Altogether now:
function handleClick(e) {
const target = this.dataset.target;
const targets = document.querySelectorAll('.swiper-slide'+target+', .game-images '+target);
document.querySelectorAll('.swiper-slide, .game-images img').forEach(el => el.classList.remove('active'));
targets.forEach(target => target.classList.add('active'));
}
So, I have this if statement and I want to add a class to an element I've added it in my if statement but it doesn't add the class.
$(".project").click(function(){
if ($(".project-expand",this).is(':visible')) {
$(".project-expand",this).hide();
} else if ($(".project-expand",this).is(':hidden')) {
$(".project-expand",this).show();
$(".project",this).addClass('item-dropped');
}
});
This line seems wrong to me
$(".project",this).addClass('item-dropped');
You are passing this which already should be the .project element you clicked as a context for your selector. Unless you have a nested .project I don't think jQuery will be able to find the element you are looking for
Replace that line with $(this).addClass('item-dropped');
I am trying to implement a function which changes style of element on click and remove it when unfocus. For ex: When element2 is clicked, it should remove class of other elements, and add class to the clicked element only.
<div class="dope" id="element777"></div>
<div class="dope" id="element2"></div>
<div class="dope" id="element11"></div>
<div class="dope" id="element245"></div>
<div class="dope" id="element60"></div>
.....(More are created automatically, numbers are not estimatable)
I couldnt know the element ids that are created. The only remains same is class.
I have tried this, but its an unprofessional approach.
$('#element1').click(function(){
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element1").blur(function(){
$("#element1").removeClass(dope);
});
$('#element2').click(function(){
$("#element2").addClass(dope2);
$("#element1").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element2").blur(function(){
$("#element2").removeClass(dope);
});
What is the best approach for automating this function, instead of adding click and blur (unfocus) function to ALL of elements ?
You can listen for click events on any div with an id containing the word "element', then target its siblings elements (those that are not clicked, without referring to them by id). This might do it:
$("div[id*='element']").click(function(){
$(this).addClass('dope').siblings('.dope').removeClass('dope');
});
Your jQuery could be vastly simpler if you leverage this and siblings:
Instead of:
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
It could be:
$('.dope').click(
function() {
$(this).addClass(dope2).siblings().removeClass(dope);
}
);
NOTE:
Do you have a variable called dope with the class name, or is dope the class name? If it's the classname, you need to put it in quotes: $(this).addClass('dope2'), etc.
If you are removing the class dope, then will want to add a class you can always use to select these elements (so that when you remove dope, it continues to work).
Button part:
$("div").click(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).addClass("dope2");
$(".dope").not($(this)).removeClass("dope");
}
})
Blur part:
$("div").blur(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).removeClass("dope");
}
}
I would recommend using the :focus css selector rather than using javascript to do what you are doing... Read more here. Instead of having a click listener, the focus selector will take care of that for you and automatically remove the styling when the element is out of focus.
I have a live search and a list element is given a class of hover I am then trying to get the next li element after the hover class upon pressing the down arrow and adding the hover class to that element. Here is what I have:
if(e.keyCode == 40){
var current = results.find('li.hover');
current.removeClass();
current.parent().next('li').addClass('hover');
return false;
}
It just will not add a class to the next element. It finds the current class just fine. Not sure what I am doing wrong. Appreciate it!
Use e.which, not e.keyCode. jQuery normalizes the property (IE doesn't support e.keyCode):
if(e.which == 40){
As for your selector, try this:
results.find('li.hover').removeClass().next('li').addClass('hover')
.next() looks for the next sibling matching the selector, so there is no need to call .parent().
You are looking for the LI.hover, after that you go to the parent (which is the UL) and then select the next LI after the UL.
Change this:
current.parent().next('li').addClass('hover');
To:
current.next('li').addClass('hover');
current.parent().next('li') is probably not doing what you want.
Since current is a jQuery object of li tags, I assume that it's parent is a ul tag. If that's the case, then next('li') is looking for a first sibling of the ul tag that's an li tag which it will never find.
It's unclear to me which li you want to add the hover class to so I'm not sure exactly what to recommend to do what you want.
Do not you just want to do that :
if(e.keyCode == 40){
var current = results.find('li.hover');
current.removeClass();
current.next('li').addClass('hover');
return false;
}
without parent() ?
current.nextSibling should refer to the next li element in the list