How to make a string of some specific values in the dom? - javascript

I have the following HTML:
<div>
<i class="fa fa-male ">:Before</i>
<i class="fa fa-like">:Before</i>
</div>
Now I want to make a string like this: male, like. How can I do that?
console.log(/fa-([^"]+)/.exec($('div').html()));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<i class="fa fa-male ">:Before</i>
<i class="fa fa-like">:Before</i>
</div>

You will need to loop after you select all icons. For example like this:
var str = $('.fa').map(function() {
return this.className.match(/fa-([^"]+)/)[1]
}).get()
.join(', ')
console.log(str)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<i class="fa fa-male">:Before</i>
<i class="fa fa-like">:Before</i>
</div>

Simply iterate over the the elements using map and extract (replace) the class name of the element.
var icons = document.getElementsByClassName('fa');
var str = Array.from(icons)
.map(c => c.classList.value.replace('fa fa-', ''))
.join(', ')
console.log(str)
<div>
<i class="fa fa-male">:Before</i>
<i class="fa fa-like">:Before</i>
</div>

Related

problem in #click event which adding one more fontawesome icon

i tried to make responsive navigation with vue js, when i tried to add '#click' to toggle burger bar or close icon, but it's adding the 'close' icon instead every time i click it.
here's the code
template section
<template>
// ----
<button #click="toggleButton">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="!toggleClose" class="fas fa-times"></i>
</button>
// ----
</template>
script section
<script>
export default {
name: "MultiNav",
data: function() {
return {
toggle: false,
toggleClose: true
};
},
methods: {
toggleButton() {
this.toggle = !this.toggle;
this.toggleClose = !this.toggleClose;
}
}
};
</script>
pict :
i try to use :
<button #click="toggle = ! toggle">
<i v-if="!toggle" class="fas fa-bars"></i>
<i v-if="toggle" class="fas fa-times"></i>
</button>
it still resulting the same result
You need to add a key to the icons.
<button #click="toggle = ! toggle">
<i v-if="!toggle" key="bars" class="fas fa-bars"></i>
<i v-if="toggle" key="times" class="fas fa-times"></i>
</button>
The key will tell Vue's algorithm that the icons are in fact different elements. Without that the virtual dom representation thinks that they are the same element.
Try switching the classes using condition
<button #click="toggle = ! toggle">
<i class="fas" :class="toggle?'fa-times':'fa-bars'"></i>
</button>

How to know how many class elements have been selected on click?

I'm working on wishlist, i have heart icon on each item, Now i want to display total number of item added in wishlist. What is proper way to do this?
$(function() {
$('body').on('click', '.fav-icon', function() {
var icon = $(this);
var icon_fa_icon = icon.attr('data-prefix');
if (icon_fa_icon === "far") {
icon.attr('data-prefix', 'fas');
$('.search-list-box .fav-icon').each(function() {
var fasLength = $(this).attr('data-prefix', 'fas');
var wishlistDiv = +$(fasLength).length;
$('.wishlist_count sup').text(wishlistDiv);
});
} else {
icon.attr('data-prefix', 'far');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<div>
<span class="wishlist_count">
<i class="far text-orange fa-heart"></i>
<sup>0</sup>
</span>
</div>
<hr>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
Part of your problem is with these lines:
var fasLength = $(this).attr('data-prefix', 'fas');
var wishlistDiv = +$(fasLength).length;
That first line is setting the data-prefix attribute to fas on all elements so they are all chosen on first click. As it's selecting all elements the count is wrong. To fix this you need to use an attribute selector:
var fasLength = $('[data-prefix="fas"]').length;
Finally you also need to amend the count of selected items when something is deselected, so the count logic should be run outside of the if condition. The calculation also does not need the each()loop.
The complete logic will then look like this:
$(function() {
$('body').on('click', '.fav-icon', function() {
var $icon = $(this).attr('data-prefix', function(i, v) {
return v == 'far' ? 'fas' : 'far';
});
var fasLength = $('[data-prefix="fas"]').length;
$('.wishlist_count sup').text(fasLength);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.3/js/all.js" integrity="sha384-EIHISlAOj4zgYieurP0SdoiBYfGJKkgWedPHH4jCzpCXLmzVsw1ouK59MuUtP4a1" crossorigin="anonymous"></script>
<div>
<span class="wishlist_count">
<i class="far text-orange fa-heart"></i>
<sup>0</sup>
</span>
</div>
<hr>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>
<div class="search-list-box">
<i class="fav-icon far fa-heart text-orange"></i>
</div>

How to get product name and image dynamically using jQuery?

Actually I am doing add to cart functionality using jQuery. On click of add to cart button product name and image should come. Statically I can do but how to get the product name and image dynamically for all divs is what I want. Please somebody help with this.
This is my HTML markup:
<div class="col-sm-4">
<div class="prdtitem" id="anaconda">
<div class="cartBg">
<a href="#cart" onclick="addToCart()">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
</div>
<img src="images/barcunda-black.jpg" class="lazy-loaded"/>
<h4>Barcunda Black</h4>
</div>
</div>
<div class="col-sm-4">
<div class="prdtitem" id="anaconda">
<div class="cartBg">
<a href="#cart">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
</div>
<img src="images/bruno-white.jpg" class="lazy-loaded"/>
<h4>Bruno White</h4>
</div>
</div>
<div class="col-sm-4">
<div class="prdtitem" id="anaconda">
<div class="cartBg">
<a href="#cart" onclick="addToCart()">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
</div>
<img src="images/fantasy-brown.jpg" class="lazy-loaded"/>
<h4>Fantasy Brown</h4>
</div>
</div>
<div class="col-sm-4">
<div class="prdtitem" id="anaconda">
<div class="cartBg">
<a href="#cart" onclick="addToCart()">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
</div>
<img src="images/iceberg.jpg" class="lazy-loaded"/>
<h4>Iceberg</h4>
</div>
</div>
<div class="col-sm-4">
<div class="prdtitem" id="anaconda">
<div class="cartBg">
<a href="#cart" onclick="addToCart()">
<div class="enqry-cart pull-left">
<i class="fa fa-shopping-cart pull-left" aria-hidden="true"></i>
<span class="pull-left">add to enquiry cart</span>
</div>
</a>
</div>
<img src="images/mercury-white.jpg" class="lazy-loaded"/>
<h4>Mercury White</h4>
</div>
</div>
And here my jQuery code:
$(document).ready(function(){
//alert("coming");
var cart = [];
$(function () {
if (localStorage.cart) {
cart = JSON.parse(localStorage.cart);
// console.log(cart);
showCart();
}
});
});
function addToCart() {
how to get product name and image here for all divs?
// alert(price);alert(name);alert(qty);return false;
// update qty if product is already present
for (var i in cart) {
if(cart[i].Product == name) {
cart[i].Qty = qty;
showCart();
saveCart();
return;
}
}
// create JavaScript Object
var item = { Product: name, Price: price, Qty: qty };
//console.log(item);return false;
// alert(item);return false;
cart.push(item);
console.log(cart);return false;
saveCart();
showCart();
}
function deleteItem(index){
//alert(index);return false;
cart.splice(index,1); // delete item at index
showCart();
saveCart();
}
function saveCart() {
if ( window.localStorage) {
localStorage.cart = JSON.stringify(cart);
}
}
Add this to your addToCart() function on the first line:
var $parent = $(this).parents('.prdtitem');
var productName = $parent.find('h4').text();
var productImage = $parent.find('img').attr('src');
UPDATE
function addToCart(elem){
var $parent = $(elem).parents('.prdtitem');
var productName = $parent.find('h4').text();
var productImage = $parent.find('img').attr('src');
// then the rest of your existing code
}
I see a very little jQuery involved in your addToCart function. You could simply refer it's parent container to get the source attribute of the image and the product title text:
First of all, change the way button is clicked, instead of using inline function, you could add a class reference on it, and fire the addToCart button as callback:
...
$('.btn-add').on('click', addToCart);
function addToCart() {
var container = $(this).parents('.prdtitem');
var thumbnailImage = container.find('img.lazy-loaded').attr('src');
var productTitle = container.find('h4').text();
// ... rest of your code
}
Now you got the image source within the thumbnailImage variable and the title in the productTitle.
Create a click event:
$('.cartBg a').click(function(){
var img = $(this).closet('.cartBg').find('img').attr('src');
var title = $(this).closet('.cartBg').find('h4').text();
addToCart();
alert(title);
});
You can use your function like this -
JAVASCRIPT
function addToCart(obj){
var product_name = $(obj).closest('.prdtitem').find('h4').text();
var image_src = $(obj).closest('.prdtitem').find('img.lazy-loaded').attr('src');
alert(product_name,image_src);
}
In element you use this function call like this onclick=addToCart(this).

Short HTML Code from Json will display the HTML code instead of the rendered version

I'm retrieving an array filled with user data. They should be displayed in a ul. One of the fields is the prefix for every user as an html code like this <span class="red-text">[Admin]</span>. But when I try to append the li element it renders the html code instead of the red version of the span.
My json code:
{
"users":[
{
"id":"1",
"usrname":"YannickFelix",
"email":"example#gmail.com",
"lvl":"4",
"prefix":"<span class=\"red-text\">[Admin]<\/span>"
}
]
}
And my javascript:
listElemTmplt = `
<li class="collection-item avatar">
<i class="material-icons circle {"{{color}}"}">person</i>
<span class="title">{"{{usrname}}"}</span>
<p>{"{{prefix}}"} {"{{usrname}}"} | {"{{email}}"}
</p>
<span class="secondary-content">
<a class="waves-effect waves-circle" href="users.php?action=edit&uID={"{{id}}"}">
<i class="material-icons grey-text text-darken-1">create</i>
</a>
<a class="waves-effect waves-circle waves-red modal-trigger" href="#modal{"{{id}}"}">
<i class="material-icons grey-text text-darken-1">delete</i>
</a>
</span>
<div id="modal{"{{id}}"}" class="modal">
<div class="modal-content black-text">
<h4>Löschen</h4>
<p>Möchtest Du den Benutzer "{"{{usrname}}"}" wirklich löschen?</p>
</div>
<div class="modal-footer">
Abbrechen
Löschen
</div>
</div>
</li>
`;
template = Handlebars.compile(listElemTmplt);
finishedString = [];
$.getJSON("**url**", function (data) {
console.log(data);
$("ul#users").html("");
data["users"].forEach(function (element, index, array) {
html = template({"{"}id: element["id"], usrname: element["usrname"], email: element["email"], prefix: element["prefix"]{"}"});
$("ul#users").append(html);
});
});
The example item in the List. [Admin] should be red and without the html code
Handlebars escapes the values you give to it when using {{prefix}}. When you want to use raw HTML you have to use {{{prefix}}} to tell it not to escape it.

How to toggle button icon and description javascript

here is my problem. I need on click to change button icon and on another click to go to original state, like +,- and span description like home/back
i dont know what to do. Pleas help.
Here is html...
<div class="navbar-left left">
<button class="toggle btn mr2 white " >
<i class="fa fa-home fa-2x "></i>
<span class="mobile-hide ">Home</a>
</button>
</div>
and bad js
if ($('.toggle').hasClass('fa fa-home fa-2x')) {
$('.toggle').toggleClass('fa fa-home ').html('<span class="mobile-hide ">Home</a>');
} else($('.toggle').hasClass('fa fa-home ')) {
$('.toggle').toggleClass('fa fa-home fa-2x ').html('<span class="mobile-hide ">Back</a>');
}
toggleMenu();
});
You can
jQuery(function($){
$('.toggle').click(function () {
var $i = $(this).find('i').toggleClass('fa-2x');
$(this).find('span.mobile-hide').html($i.hasClass('fa-2x') ? 'Home' : 'Back')
})
})
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar-left left">
<button class="toggle btn mr2 white" >
<i class="fa fa-home fa-2x"></i>
<span class="mobile-hide">Home</span>
</button>
</div>
You can only use .hasClass() to check for a single class Name.
In order to check for many class names I guess is better get the class attribute string and check with .indexOf()
if ($('.toggle').attr("class").indexOf('fa fa-home fa-2x') != -1) {
The same happens with toggleClass. You have to break it down:
$('.toggle').toggleClass('fa').toggleClass('fa-home').toggleClass('fa-2x')
You might be able to achieve this effect with the ::after pseudo-element. Just change the content property as appropriate based on some class on the button.
A simplified example:
$(function () {
$('#toggle').click(function () {
$(this).toggleClass('on');
});
});
.icon::after {
content: '+';
}
.text::after {
content: 'Home';
}
.on .icon::after {
content: '-'
}
.on .text::after {
content: 'Back'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="toggle">
<i class="icon"></i>
<span class="text"></span>
</button>

Categories