how to add / Remove :after class to div using jQuery - javascript

How to can we add/Remove :after class to div using jQuery
let say I have following class
.vignetteC1:after { ... }
.vignetteC2:after { ... }
.vignetteC3:after { ... }
.vignetteC4:after { ... }
.vignetteC5:after { ... }
if we want to add after class to a dive using jQuery how can we do so. ?
I have googled a lot but I am only getting an example of .after function and so on.
I have tried the following but it not working
var VignetteVal = 'vignetteC' + value + ':after';
for (var i = 1; i <= 5; i++) {
Img.parent().removeClass(('vignetteC' + i + ':after'));
}
Img.parent().addClass(VignetteVal);
But the above code add vignetteC2: after class to div
like
<div class="vignetteC2: after">

You are very confused about what :after is. It's a pseudo-element. It is NOT a class and not part of the DOM structure so it cannot be edited or added with javascript.
Read more here > https://www.w3schools.com/css/css_pseudo_elements.asp
:after pseudo-element adds content after the content of an element. It is not a class. To add content after an element you can use insertAfter() or you can use append to add content at the end of the current element. Also, there is an after() method
insertAfter()
append()
after()

Related

toggle / display image through an event listener

I have a list of featured products which I get through an API call, with the title and the icon displayed in the list. All the products also have images (which I also get through the same API call)
I want the image to not display when the icon is not active, but to display when the icon is active. Not sure how I get to display that specific image when the icon to that product is active.
(kinda new into coding, so sorry if this is a weird question)
export function featuredProducts(products)
const featuredProductsContainer = document.querySelector(".featured-products_list");
featuredProductsContainer.innerHTML = "";
for (let i = 0; i < products.length; i++) {
console.log(products[i]);
if (products[i].featured) {
featuredProductsContainer.innerHTML +=
`<li class="featured-products">
<p>${products[i].title}<i class="far fa-flag" data-name="${products[i].title}"></i></p></li>
<img src="http://localhost:1337${products[i].image.url}" class="${products[i].title}"
height="300" width="300" style="display: none;">`;
}
}
const flag = document.querySelectorAll(".featured-products i");
flag.forEach(function(icon) {
icon.addEventListener("click", clicked);
});
function clicked(event) {
event.target.classList.toggle("fas"); //active
event.target.classList.toggle("far"); //unactive
}
}
TL;DR You'll want to add css to hide/show the images (As #barmar answered above).
I will propose a slightly different approach, which is toggling the classes on the images directly, to avoid a more complex rearrangement of the markup and gigantic css selectors.
But first, to make it easier, you should place the img tags inside their li, not beside them.
So, first, let's move the closing li tag to the end, after the img. Note I'm also removing the inline style of style="display: none;".
for (let i = 0; i < products.length; i++) {
console.log(products[i]);
if (products[i].featured) {
featuredProductsContainer.innerHTML +=
`<li class="featured-products">
<p>${products[i].title}<i class="far fa-flag" data-name="${products[i].title}"></i></p>
<img src="http://localhost:1337${products[i].image.url}" class="${products[i].title}"
height="300" width="300"></li>`;
}
}
Then, in your click handler, let's do something different:
function clicked(event) {
// remove all active classes
const $imgs = document.querySelectorAll('.fas')
$imgs.forEach(i => i.classList.toggle('fas'))
// add active class to targeting img
const $img = event.target.closest('li.featured-products').querySelector('img')
$img.classList.toggle("fas")
$img.classList.toggle("far");
}
Lastly, modified from from #barmar
.featured-products img.fas {
display: block;
}
.featured-products img.far {
display: none;
}
You can do this with CSS. Since your event listener toggles the far and fas classes, use CSS selectors that match an img inside those containers.
.featured-products.fas img {
display: block;
}
.featured-products.far img {
display: none;
}
There are many ways to go about this, a lot depends on what triggers the active state of the icon.
if it's any kind of input and you can keep the data in the same container then all you need to do Is add an "active" css class to the parent. This is the most performant way as you keep reads, writes and any reflows to a minimum.
Just add a general rule in in your css for the active class:
.active img { visibility: visible; }
If the images are in a separate element, you can add a dataset custom property to the icon in your html. With a value you can use in Javascript.
I. e.
<img id="icon" dataset-foo="imgContainer">
and in JS
var imgContainer = document.getElementById(icon.dataset.foo)
imgContainer.classList.add("active")
You can wrap it in a function and maybe save any references in an object. This way it's easy to keep track of any data and have very readable code.

Why does jQuery addClass not work on div element?

I have a javascript method that has 2 parameters, the first is the ID of a tr element, the other is an actual div. My add/remove class jQuery method works fine for the first item (which I get with a jQuery selector). However it throws a javascript error when I use it on the passed in Div.
onclick="ToggleTicketDetails('ticketDetails_#(ticket.TicketID)', this);"
I can obviously use a jQuery selector on the div to fix this, however I would like to know why it behaves this way.
function ToggleTicketDetails(detailsId, divSender) {
//alert(divSender);
var element = $('#' + detailsId);
//alert(element);
if (element.hasClass("TicketDetailsOff")) {
element.removeClass("TicketDetailsOff").addClass("TicketDetailsOn");
divSender.removeClass("DivAsExpand").addClass("DivAsCollapse");
}
else {
element.removeClass("TicketDetailsOn").addClass("TicketDetailsOff");
divSender.removeClass("DivAsCollapse").addClass("DivAsExpand");
}
}
divSender is DOM element. Use jquery object $(divSender) to apply removeClass and addClass on this like below.
function ToggleTicketDetails(detailsId, divSender) {
var element = $('#' + detailsId);
if (element.hasClass("TicketDetailsOff")) {
element.removeClass("TicketDetailsOff").addClass("TicketDetailsOn");
$(divSender).removeClass("DivAsExpand").addClass("DivAsCollapse");
}
else {
element.removeClass("TicketDetailsOn").addClass("TicketDetailsOff");
$(divSender).removeClass("DivAsCollapse").addClass("DivAsExpand");
}
}

jQuery addClass to element with same class name with Waypoints

I have an event in which I need to add a class to an element with a matching class name.
For example:
<a class="one"></div>
<a class="two"></div>
<div class="one"></div>
<div class="two"></div>
How do I find and add an additional class to the element with the matching class name?
Here is my script, I need it to target the tag with matching class.
jQuery('div.two').waypoint(function(direction) {
if (direction === 'down') {
jQuery(this).addClass("active") // to <a> element that shares same class
}
else {
}
});
I'm not familiar with this plugin but I'll give it a shot. Based off what you've provided I think your problem is:
jQuery(this).addClass("active")
Since you already know the class, just do:
var tempClass = $(this).attr("class");
jQuery("a."+tempClass).addClass("active");
Just select by class names.
Array.prototype.forEach.call(document.querySelectorAll(".one"), function(el) {
el.classList.add("whateverClass");
});
Instead of a for loop, this uses the prototype method forEach with the call method to turn the NodeList into an array list, adding the class to each element with the class "one"
DEMO
You probably want to remove the class from the others first, then add to the applicable <a>
jQuery('div.two').waypoint(function(direction) {
if (direction === 'down') {
/* remove prior active class */
jQuery("a.active").removeClass('active');
/* add to current one */
jQuery("a.two").addClass('active');
}
else {
}
});
To make this more generic I would add a class like waypoint to all the content elements as well as a data-point to be able to simplify instances.
<div data-point="one" class="waypoint"></div>
JS
jQuery('.waypoint').waypoint(function(direction) {
if (direction === 'down') {
/* remove prior active class */
jQuery("a.active").removeClass('active');
/* add to current one */
var linkClass=$(this).data('point')
jQuery("a." + linkClass).addClass('active');
}
else {
}
});

My Javascript doesn't work. Don't know if it's the Function, how I'm calling it, the CSS I used or what

My function:
function ChangeStep(id)
{
var i = 1;
// hide all other tabs:
while(i<10) {
var divID = 'tabs' + i;
if (divID !== null) {
document.getElementById(divID).className += " hide";
}
i++;
}
// show this one
document.getElementById(id).className += " show";
}
How I'm calling it:
<div id="prev"><img src="img/prv.png" onClick="ChangeStep('tabs1'); return false;"></div>
<div id="next"><img src="img/nxt.png" onClick="ChangeStep('tabs2'); return false;"></div>
The Divs I want to show/hide:
<div id="tabs1" class="hide"><h1>Step 1</h1></div>
<div id="tabs2" class="show"><h1>Step 2</h1></div>
My Css:
.hide { visibility: hidden; }
.show { visibility: visible; }
Basically what I want to do is: When I click Next or Previous, show the corresponding "Tab" by hiding all the others and showing this. This should be done by adding the class "Hide" or "Show" depending on if it is to be hidden or visible.
You are always appending class names, so they will (after being shown once) be members of both the show and hide classes and both rulesets will apply (in the normal cascade order).
If you don't need to maintain any other classes, you can replace your append operator += with a simple assignment: =
If you do need to maintain other classes on the elements, then you can use classList instead.
document.getElementById(divID).classList.remove('show');
document.getElementById(divID).classList.add('hide');
If you need to support Old-IE then you can use a polyfill (which will probably run regex over the classList) or an API that provides similar functions. Most common JS libraries (such as YUI and jQuery) have one built in.

jQuery: Select only a class containing a string?

I'm currently using this to get the class for a specific bit of HTML on the page:
$(this).parent("div").attr('class')
But that div has multiple classes: current_status status_billed
My end goal here is to grab the class that starts with status_ and replace it with a different class name.
So using my .parent() function above, I'm able to select the div I need, but I then need to remove the status_billed class and replace it with, for example, status_completed (or a number of other class names).
Select divs that have the status_billed class:
$(this).parent('div.status_billed')
Select divs whose class attribute contains status_:
$(this).parent('div[class*=status_]')
That's about the best you'll get with jQuery selectors. You can do better using .filter():
$(this).parent('div').filter(function ()
{
var classes = $(this).attr('class').split(' ');
for (var i=0; i<classes.length; i++)
{
if (classes[i].slice(0,7) === 'status_')
{
return true;
}
}
return false;
});
...but I'm not sure why you're doing all this - .parent() returns at most 1 element. Did you mean .closest() or .parents()?

Categories

Resources