How to hide an element based on another existing - javascript

I have a jQuery code that looks for a specific div element.
If the element exist I define a variable and use parseFloat() function. Since there are going to be more than one element with the same class I've created an array.
So far I've managed to hide the element called: div.ifc-balance-div; however I am not quite sure how I can hide the div.ribbon-yellow, in case the element does not have the variable savePrice.
(function($) {
"use strict";
$(document).ready(function() {
var j = 0,
savePrices = jQuery('.special-price .price .price').map(function() {
return parseFloat(jQuery(this).text().replace(/[^0-9\.]+/g, ""), 10);
}).get();
if(j < savePrices.length){
++j;
}
for (var i = 0; i < savePrices.length; ++i) {
if (Number(savePrices[i]) > 0) {
var ifcBalance = Number(savePrices[i]) / 1,
m = parseFloat(ifcBalance).toFixed(0);
$('div.ifc-balance-div' + (i + 1)).html('<p class="dynamic-badge-txt"><b>£' + m + ' OFF</b></p>');
$('div.ribbon-yellow').html('<div class="badge-ends-message">ENDS TUESDAY</div>');
}
else {
$('div.ifc-balance-div' + (i + 1)).hide();
}
}
});
})(jQuery);
Here is a sample of the HTML Code:
one having Save Price:
Text
<div class="price-box">
<p class="old-price">
<span class="price-label">Was</span>
<span class="price" id="old-price-15510">
<span class="price"><span class="currency">£</span>599</span> </span>
</p>
<p class="special-price">
<span class="price-label">You Save</span>
<span class="price" id="price-excluding-tax-15510">
<span class="price"><span class="currency">£</span>300</span> </span>
</p>
</div>
From
£299
One without save price:
<div class="ribbon-yellow"></div>
<div>
</div></div></div>
<a href="#" title="#">
<img src="#" alt="#">
</a>
</div>
<div class="item__detail">
<a href="#" title="#" class="item__link">
<p class="product-name item__name">Text</p>
</a>
<div class="price-range">
<span class="price-label">From </span>
<span class="price"><span class="price"><span class="currency">£</span>299</span></span>
</div>
</div>
</div>

Related

Add class in loop attribute with javascript

I want to put a class in multiple attributes if it's in the correct url.
I am entering the case if it is in url and trying to add, the code in the console just says undefined but does not perform the actions.
document.addEventListener('DOMContentLoaded', () => {
for (var i = 0; i < 40; i++) {
document.querySelector('span .price').classList.add("forcehide");
}
});
span.price.forcehide {
display: none;
}
<div class="info-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="https://www.myurl.com.br/product"> NAme Product </a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="2293" data-price-box="product-id-2293">
<span class="price-container price-final_price tax weee">
<span id="product-price-2293" data-price-amount="13.9" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">R$13,90</span>
</span>
</span>
</div>
</div>
<div class="info-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="https://www.myurl.com.br/product"> NAme Product </a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="2293" data-price-box="product-id-2293">
<span class="price-container price-final_price tax weee">
<span id="product-price-2293" data-price-amount="13.9" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">R$13,90</span>
</span>
</span>
</div>
</div>
How to delete all price?
As Satpal said in the comments, querySelector method returns just one element.
To get a list of all elements matching the query selector, you should use querySelectorAll:
document.addEventListener("DOMContentLoaded", () => {
const spans = document.querySelectorAll("span.price");
for (let i = 0; i < spans.length; i++) {
const span = spans[i];
span.classList.add("forcehide");
}
});
document.addEventListener("DOMContentLoaded", () => {
const spans = document.querySelectorAll("span.price");
for (let i = 0; i < spans.length; i++) {
const span = spans[i];
span.classList.add("forcehide");
}
});
span.price.forcehide {
display: none;
}
<div class="info-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="https://www.myurl.com.br/product"> NAme Product </a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="2293" data-price-box="product-id-2293">
<span class="price-container price-final_price tax weee">
<span id="product-price-2293" data-price-amount="13.9" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">R$13,90</span>
</span>
</span>
</div>
</div>
<div class="info-details">
<strong class="product name product-item-name">
<a class="product-item-link" href="https://www.myurl.com.br/product"> NAme Product </a>
</strong>
<div class="price-box price-final_price" data-role="priceBox" data-product-id="2293" data-price-box="product-id-2293">
<span class="price-container price-final_price tax weee">
<span id="product-price-2293" data-price-amount="13.9" data-price-type="finalPrice" class="price-wrapper ">
<span class="price">R$13,90</span>
</span>
</span>
</div>
</div>

Unable to get position of target in ScrollLeft or ScrollTo in ASP.NET JavaScript

I am trying to scroll horizontal <div> by clicking on button and jumping to the position of given element.
I am trying like this:
<input type="button" class="hor" onmousedown="scrollDiv6('MyDiv3', Eve_25)" value=#Model.CalendarDates[i].Date />
var timer6;
function scrollDiv6(divId6, depl6) {
var scroll_container6 = document.getElementById(divId6);
var target = $(document.getElementById(depl6)).position().left;
scroll_container6.scrollTo(target);
//timer6 = setTimeout('scrollDiv6("' + divId6 + '", ' + depl6 + ')', 1);
}
<div class="scrolling-wrapper-flexbox scroller" id="MyDiv3" style="width:100%;position:relative; z-index:2;">
#for (int i = 0; i < Model.HomeEventsList.Count(); i++) {
<div class="card2" style="width:300px;height:400px;" id="Eve_#i">
<div style="text-align:center;">
<h4 style="font-size:30px;text-align:center;" class="center-fit">#Model.HomeEventsList[i].EventName.ToString()</h4>
<div class="featuredImageBox" style="width:280px">
<img height="200" width="280" style="object-fit:cover" src="~/UserFiles/#Model.Owner/min/#Model.HomeEventsList[i].EventFeaturedImage" />
</div>
<div style="text-align:center;">
<span class="center-fit" style="text-align:center;font-size:30px;">
#Model.HomeEventsList[i].EventStart.DayOfWeek.ToString()
#Model.HomeEventsList[i].EventStart.ToString("dd MM yyyy")
</span>
</div>
<div style="text-align:center">
<span class="center-fit" style="text-align:center;font-size:30px;">
#Model.HomeEventsList[i].EventStart.ToString("HH:mm")
#Model.HomeEventsList[i].EventDuration
</span>
</div>
<h4 class="center-fit" style="text-align:center;font-size:30px;overflow-wrap: break-word;word-wrap: break-word;hyphens: auto;">#Model.HomeEventsList[i].EventDescription.ToString()</h4>
</div>
</div>
}
</div>
On button click nothing happens.
How can I scroll to given element on button click?

jQuery increase value only at clicked div

I need to increase value, by clicking plus or minus picture. It works fine when it's only one "item_quantity" block at the page. But it works incorrectly if I wanna add another "item_quantity" block.
JS code that increase value:
$('.item_quantity .plus').click(function() {
var num = parseInt($('.item_quantity .quan_numb').text());
$('.item_quantity .quan_numb').text(num + 1);
});
http://codepen.io/Vlasov/pen/dvogmp?editors=1010
$(this).parent().find('.quan_numb')
http://codepen.io/anon/pen/ZeGqmd?editors=1010
$('.item_quantity .plus').click(function() {
var num = parseInt($(this).parent().find('.quan_numb').html());
$(this).parent().find('.quan_numb').html(num + 1);
});
$('.item_quantity .minus').click(function() {
var num = parseInt($(this).parent().find('.quan_numb').html());
if (num > 1) {
$(this).parent().find('.quan_numb').html(num - 1);
}
});
.minus img, .plus img{
width: 20px;
cursor: pointer;
}
.quan_numb{
font-size: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item_quantity fll">
<span class="minus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
</span>
<span class="quan_numb">1</span>
<span class="plus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
</span>
</div>
<div class="item_quantity fll">
<span class="minus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
</span>
<span class="quan_numb">1</span>
<span class="plus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
</span>
</div>
Try this :
$('.item_quantity .plus').click(function() {
var num = parseInt($(this).siblings('.item_quantity .quan_numb').text());
$(this).siblings('.item_quantity .quan_numb').text(num + 1);
});
$('.item_quantity .minus').click(function() {
var num = parseInt($(this).siblings('.item_quantity .quan_numb').text());
if (num > 1) {
$(this).siblings('.item_quantity .quan_numb').text(num - 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item_quantity fll">
<span class="minus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
</span>
<span class="quan_numb">1</span>
<span class="plus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
</span>
</div>
<div class="item_quantity fll">
<span class="minus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/minus.png" alt="">
</span>
<span class="quan_numb">1</span>
<span class="plus">
<img src="http://www.sammy-icon.com/catalog/view/theme/default/image/icon/plus.png" alt="">
</span>
</div>
You are using the class selector for selecting the quantities.
You need to be a touch more specific, and reference each individual quantity.
You can find the closest .quan_numb by performing:
var quan_numb = $(this).closest(".item_quantity").find(".quan_numb");
Which finds the closest parent with class item_quantity, then finds the child quan_num.
codepen
It work incorrect because you are using Class use Id instead of class
$('#item_quantity1 .plus').click(function() {
var num = parseInt($('#item_quantity1 .quan_numb').text());
$('#item_quantity1 .quan_numb').text(num + 1);
});
If you want to add more use different Id's
It because jQuery will return an array if the selector belongs to multiple elements. Use the following code to specify the element that is paired with the button.
var num = parseInt($(this).siblings('.quan_numb').text());
See on Codepen

MVC javascript display selected data

First of all, I list the e-mail from coming ActionResult in the first cycle.
I want to see the details by clicking on the listed data. I open with the help of jQuery details. The problem arises in this section. in this case ,the opening of the details of the first mail in the detail of each row.
There are details of the message in the second loop.To connect to the two loops in a guid font was coming. (MessageId).
id=messageId (guid type)
mailing list
<div class="message-list-container">
<div class="message-list" id="message-list">
#foreach (var item in Model)
{
<div id="#item.MessageId" class="message-item">
<span class="sender" title="#item.From">
#item.From
</span>
<span class="time">#mvcHelper.saatAyarla(item.Date)</span>
#if(item.Attachments.Any())
{
<span class="attachment">
<i class="ace-icon fa fa-paperclip"></i>
</span>
}
<span class="summary">
<span class="text">
#item.Subject
</span>
</span>
</div>
}
</div>
</div>
mailing details
<!--Messsage details-->
#foreach (var item in Model)
{
<!-- <div class="hide message-content" id="id-message-content">-->
<div class="hide message-content" id="#item.MessageId">
<div class="message-header clearfix">
<div class="pull-left">
<span class="blue bigger-125"> #item.Subject </span>
<div class="space-4"></div>
<i class="ace-icon fa fa-star orange2"></i>
<img class="middle" alt="John's Avatar" src="/Areas/admin/Content/images/avatars/avatar.png" width="32" />
#item.From
<i class="ace-icon fa fa-clock-o bigger-110 orange middle"></i>
<span class="time grey">#mvcHelper.saatGoster(item.Date)</span>
</div>
</div>
<div class="hr hr-double"></div>
<div class="message-body">
<p>
#item.TextBody
</p>
</div>
<div class="hr hr-double"></div>
<!--Eklenti paneli-->
<div class="message-attachment clearfix">
#if (item.Attachments.Any())
{
<div class="attachment-title">
<span class="blue bolder bigger-110">Eklentiler</span>
<span class="grey">(#item.Attachments.Count() Dosya)</span>
</div>
<ul class="attachment-list pull-left list-unstyled">
#foreach (var attachment in item.Attachments)
{
<li>
<a href="#" class="attached-file">
<i class="ace-icon fa fa-file-o bigger-110"></i>
<span class="attached-name">#mvcHelper.getAttachmentName(attachment.ToString())</span>
</a>
<span class="action-buttons">
<a href="#">
<i class="ace-icon fa fa-download bigger-125 blue"></i>
</a>
<a href="#">
<i class="ace-icon fa fa-trash-o bigger-125 red"></i>
</a>
</span>
</li>
}
</ul>
}
</div>
</div><!-- /.message-content -->
}
<!--Eklenti paneli Son-->
<!--message details end-->
loop connecting two points.
first foreach = <div id="#item.MessageId" class="message-item">
//Places where the problem is. They need to be connected.
second foreach = <!-- <div class="hide message-content" id="id-message-content">-->
<div class="hide message-content" id="#item.MessageId">
var content = message.find('.message-content:last').html($('#id-message-content').html());
jQuery code
$('.message-list .message-item .text').on('click', function () {
var message = $(this).closest('.message-item');
//if message is open, then close it
if (message.hasClass('message-inline-open')) {
message.removeClass('message-inline-open').find('.message-content').remove();
return;
}
$('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
setTimeout(function () {
$('.message-container').find('.message-loading-overlay').remove();
message
.addClass('message-inline-open')
.append('<div class="message-content" />');
var content = message.find('.message-content:last').html($('#id-message-content').html());
//remove scrollbar elements
content.find('.scroll-track').remove();
content.find('.scroll-content').children().unwrap();
content.find('.message-body').ace_scroll({
size: 150,
mouseWheelLock: true,
styleClass: 'scroll-visible'
});
}, 500 + parseInt(Math.random() * 500));
});
Your first problem is that you are creating multiple elements with identical id properties. This makes your HTML invalid.
Here is the problem code:
#foreach (var item in Model)
{
<div id="#item.MessageId" class="message-item">
...
#foreach (var item in Model)
{
<div class="hide message-content" id="#item.MessageId">
...
For each message in your model, this will create 2 <div> elements whose id has the value of the #item.MessageID variable. The second of these is and illegal element because it has the same ID as an earlier element. You will need to make these <div>s have unique IDs.
The second problem is:
When you run
var content = message.find('.message-content:last').html($('#id-message-content').html());
this part:
$('#id-message-content').html()
cannot find anything because there is no element whose id is "id-message-content". Also every time you open the message, you are appending another "message-content" div into the message-item. This is not necessary.
To fix these issues, you can change the code like this:
First loop:
#foreach (var item in Model)
{
<div data-messageid="#item.MessageId" class="message-item">
...
<span class="summary">
<span class="text">
#item.Subject
</span>
</span>
<div class="message-content" hidden></div>
...
Second loop:
#foreach (var item in Model)
{
<div class="hide message-content" id="message-content-#item.MessageId">
...
jQuery:
$('.message-list .message-item .text').on('click', function () {
var message = $(this).parents('.message-item');
//if message is open, then close it
if (message.hasClass('message-inline-open')) {
message.removeClass('message-inline-open').find('.message-content').hide();
return;
}
$('.message-container').append('<div class="message-loading-overlay"><i class="fa-spin ace-icon fa fa-spinner orange2 bigger-160"></i></div>');
setTimeout(function () {
$('.message-container').find('.message-loading-overlay').remove();
message.addClass('message-inline-open');
var content = message.find(".message-content");
content.show();
content.html($('#message-content-' + message.data("messageid")).html());
//remove scrollbar elements
content.find('.scroll-track').remove();
content.find('.scroll-content').children().unwrap();
content.find('.message-body').ace_scroll({
size: 150,
mouseWheelLock: true,
styleClass: 'scroll-visible'
});
}, 500 + parseInt(Math.random() * 500));
});
Solved
public static class mvcHelper
{
public static string variableReplace(string id)
{
string yazi = null;
if (id != null)
{
yazi = id.Replace('#', 'a').ToString();
}
else
{
yazi = id;
}
return yazi;
}
}
<div data-messageid="#mvcHelper.variableReplace(item.MessageId)" class="message-item">
<div class="hide message-content" id="message-content-#mvcHelper.variableReplace(item.MessageId)">

how to dynamically set text to an element in jquery

i have an onclick function that that calls a changeName function anytime a click event on that element happens.
function changeName() {
var frag = $('<span class="Name">change me</span>');
$( ".list" ).prepend(frag);
var x =[];
$('.ch-gname').each(function(index, obj)
{
x.push($(this).text());
for(i=0; i<x.length; i++) {
$('.Name').text(x[i]);}}});
$('#action').on('click', changeName);
HTML
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">Greenhouse</span>
</div>
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">tree house</span>
</div>
<div>
<a href="#0" class="cb-pgcar"</a>
<span class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>
i want to able to change the text of the class Name to the text of class ch-gname. My function gives me only the last text text(lighthouse) for the three links.Any help please
The function changeName() has $('#action').on('click', changeName); but i do not see any element with id 'action'. Anyhow i've made necessary changes in order to make it work.
Added Action id to the elements
Changed the $('.Name').text(x[i]); to $('.Name')[i].innerHTML = x[i];
Look at the below example
function changeName() {
var frag = $('<span class="Name">change me</span>');
$(".list").prepend(frag);
var x = [];
$('.ch-gname').each(function(index, obj) {
x.push($(this).text());
});
for (i = 0; i < x.length; i++) {
$('.Name')[i].innerHTML = x[i];
}
}
$('#action').on('click', changeName);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">Greenhouse</span>
</div>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">tree house</span>
</div>
<div>
<a href="#0" class="cb-pgcar" </a>
<span id="action" class="ch-gname">light house</span>
</div>
<div class="list">
</div>
<div class="list">
</div>
<div class="list">
</div>

Categories