Develop Reference

How to get a value of inner element when clicked on li using JQuery

This is my li element. I want to get only the value of class 'preview' when clicking on the li element using jquery.
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
Output should be: john#gmail.com
I tried below code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $('.preview').val($(this).text());
})
Am getting the entire li items click event list as output.
Please help on this. Thanks.

You'd want to attach the click event handler to each list node, then a few ways could find the child nodes text value, one approach would be using the event.target to get access to the clicked list node, or my approach would be iterating over the list node collection as the following example illustrates.
const theLinkContains = email => document.querySelector('h2 span').textContent = email;
(() =>
{
document.querySelectorAll('li.contact')
.forEach(link =>
{
link.addEventListener('click', () =>
{
theLinkContains(link.querySelector('.preview').textContent);
});
});
})();
ul {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
li {
position: relative;
display: block;
padding-left: 5px;
margin-bottom: -1px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .125);
}
.preview {
display: none;
}
<h2>Result: <span></span></h2>
<ul>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">Bob</p>
<p class="preview">Bob#gmail.com</p>
</div>
</div>
</li>
</ul>

The issue in your code is using .val() which is wrong to have it here, what you need is to select the <li> tag and then perform .find() to get the child .preview and then get its text using .text()
This is what you should have in your code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $(this).find('.preview').text();
console.log(data);
})
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

Change background color of individual div when clicked in a row of 5 and reset when another is clicked?

I have found alot of useful answers on this website when i have got stuck and now i find myself lost as I'm pretty new to this and don't know any javascript.
I am trying to add a feature to my website that will include 5 buttons that reveal a div underneath for each button (I have the code for the toggle of this that's okay but!!
This is going to probably sound so easy to you guys but how can I change the background color when the div is clicked on and then reset it if they click one of the other divs, this should work on each of the 5.
<style type="text/css">
.btnmtb{
margin-right: 5px;
touch-action: manipulation;
cursor: pointer;
background-color: #1E2327;
padding: 20px 0px;
text-align: center;
}
.btnmtb h1 {
color: #fff;
}
.btnmtb h4 {
color: #fff;
}
.btnmtb p {
color: #fff;
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
padding: 0px 20px 0px 20px;
}
</style>
<div class="disciplines">
<div class="row">
<div class="btnmtb col-md-2 col-md-offset-1 box1">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Cross Country</h1>
<h4>Hardtail - 100/120mm</h4>
<p>eMountain Bikes designed for light offroad trails</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box2">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Cross Country</h1>
<h4>FullSus - 100/120mm</h4>
<p>Fast paced eMTB's designed for light trail with rear suspension</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box3">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Trail</h1>
<h4>FullSus - 140/150mm</h4>
<p>Mid Travel - perfect weapons for the more ambitious eMTB rider</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box4">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Enduro</h1>
<h4>FullSus - 160/170mm</h4>
<p>eMountain bikes with long travel designed for the toughest terrain</p>
<i class="fa fa-chevron-down"></i>
</div>
<div class="btnmtb col-md-2 box5">
<p><img src="https://charged.bike/image/catalog/demo/symbols/trail-control.png" width="60%"></p>
<h1>Fatbike</h1>
<h4>Large Tyres - 100/120mm</h4>
<p>The eMountain bikes that look like they have dropped out of a comic book</p>
<i class="fa fa-chevron-down"></i>
</div>
</div>

Please use this javascript code (Updated)
var elements = document.getElementsByClassName('btnmtb');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function() {
for (var j = 0; j < elements.length; j++) {
if (elements[j].hasAttribute("style")) {
elements[j].setAttribute('style', '');
}
}
this.style.backgroundColor = "red";
}, false);
};

HTML
<body>
<div class="container">
<div style="background-color:red;width:50%" class="element active">
Red
</div>
<div style="background-color:yellow;width:50%" class="element">
Yellow
</div>
<div style="background-color:blue;width:50%" class="element">
Yellow
</div>
<div style="background-color:black;width:50%" class="element">
Yellow
</div>
<div style="background-color:white;width:50%" class="element">
Yellow
</div>
</div>
</body>
JavaScript+JQuery
$(".element").on("click",function()
{
$(".element").removeClass("active");
$(this).addClass("active");
});
CSS
.active{
background-color:green !important;
}
JSFiddle

How can I disable parent background div when a child container div is active?

I want to disable a parent background div which contains grid with data. On the grid there are options like sorting and exporting the data into csv/pdf. Also, on this grid there is a filter button, on click of which(via ng-click= xyz();) a filter overlay comes. This is a child container div inside the parent div. I want to disable the parent grid div when this filter overlay div opens i.e., disable the sorting and export and any other functionalities on the parent div.
Any help form anyone? My entire project is in angular js. An example with a demo will be great!
In agg.service.js
angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {
var service = {
openFilterOverlay: function() {
console.log("Toggle Filter overlay00");
var filteroverlay = angular.element(".filter-overlay");
if(filteroverlay.hasClass('open')) {
filteroverlay.removeClass('open');
} else {
filteroverlay.addClass('open');
}
angular.element('.tooltip').hide();
},
};
return service;
}]);
In index.html
<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">
<div class="ddt-container">
<h2>
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
</div>
<!--div container for filter overlay starts here-->
<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
<h2 ng-hide="true" class="remove">
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
<div class="ddt-sidebar filter-overlay col-md-2">
<div class="row">
<div class="col-md-6">
<div class="form-group ddt-filter-box-group">
<select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
<option value="">My Saved Filters</option>
</select>
</div>
</div>
<div class="col-md-6">
<button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>
</div>
</div>
<!--The code continues having several filter box -->
<div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
<div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
<ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>
In summaryGrid.html
<div class="grid-header">
<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
<i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>
In styles.css
.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
}
.filter-overlay.open {
transition: 1s;
left: 0;
}
.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}
.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}
.container-fluid .row{
margin-left: 0;
margin-right: 0;}
.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}
.tab-content > .tab-pane {
display: none;}
.tab-content > .active {
display: block;}

If you disable the parent element then obviously the children elements will also be disabled. Instead of making them parent and children you can place those two divs as siblings and hide them individually depending on the visibility of the element.

JavaScript - Remove class after img title matches?

So I am trying to do something like. I have an multiple HTML "li's" and each has in <img title=TextHere>. So I would like to match that title part with string what I got. If it matches, then remove parent.parent class name. Here's the HTML
<li class="col 2 zoomIn animated" style="padding: 8px; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light" data-itemnaaaaaaaaaaaame="★ Butterfly Knife | Crimson Web (Field-Tested)" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
<div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
<div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $111.43 (You save: $-38.15)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>
</li>
Full part where is that code in:
$(document).ready(function(){
$('.sweet-content').on('click', 'div', function() {
var removedname = $(this).ignore('span').text();
console.log(removedname);
$('li img[title="' + removedname + '"]').closest('.card').removeClass('red lighten-1 white-text selected-item');
$(this).remove();
});
});

Try like following
var title = "TextHere";
$('li img[title="' + title + '"]').parent().parent().removeClass('class_name')

The following will only affect the last one:
var title = "anything";
$("li img[title='" + title + "']").closest("className").remove("className");

Unrecognized expression in js script

I'm very new into js at all and will need some help with this. This is my vote.js script
function vote(type, value, image_id) {
var dataFields = {'type': type, 'value': value, 'image_id': image_id};
var ThisImageVotes = $("#"+image_id).find('#'+type).html();
$.ajax({ // Ajax
type: "POST",
url: "add_vots.php",
data: dataFields,
timeout: 3000,
success: function(dataBack){
$("#"+image_id).find('#'+type).html(dataBack);
if(type=='positive')
{
$("#"+image_id).find('#voteUp a').replaceWith('');
}
else if(type=='negative')
{
$("#"+image_id).find('#voteDown a').replaceWith('');
}
$("#"+image_id).find('#voteUp("#"+image_id).find("#voteUp a")').attr('class', 'vote_up_done oneLine');
$("#"+image_id).find('#voteDown').attr('class', 'vote_down_done oneLine');
$("#"+image_id).find('#positive').attr('class', 'numberVoted oneLine');
$("#"+image_id).find('#negative').attr('class', 'numberVoted oneLine');
$('#message').html('<div id="alertFadeOut" style="color: green">Your vote is added!</div>');
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Error! Please try again!');
}
});
}
What this script do is to let people to vote on image and when vote is done to make button (thumb up/down) grey i.e. disabled. Normally button must go grey right after the vote is done. Currently the vote is recorded into database but buttons doesn't turn grey and I can vote as much as I want. Once the page is refreshed buttons are disabled.
And if need this is the HTML part from the page with images.
<div id="'.$row['image_id'].'" class="pull-right">
<div id="lineBlock">Ratings: ';
if (isset($_COOKIE[$cookie_name])) {
echo '<div class="vote_up_done oneLine"></div>
<div class="numberVoted oneLine">'.$vote['positive'].'</div>';
} else {
echo '<div class="vote_up oneLine" id="voteUp"></div>
<div class="number oneLine" id="positive">'.$vote['positive'].'</div>';
}
if (isset($_COOKIE[$cookie_name])) {
echo '<div class="vote_down_done oneLine"></div>
<div class="numberVoted oneLine">'.$vote['negative'].'</div>';
} else {
echo '<div class="vote_down oneLine" id="voteDown"></div>
<div class="number oneLine" id="negative">'.$vote['negative'].'</div>';
}
echo '</div><span id="message"></span>
</div>
The error in console is this
Uncaught Error: Syntax error, unrecognized expression: #voteUp$("#"+image_id).find("#voteUp a")
Any ideas why buttons doesn't turn grey(disabled) and why is this error?

You need to replace this line:
$("#"+image_id).find('#voteUp("#"+image_id).find("#voteUp a")').attr('class', 'vote_up_done oneLine');
With:
$("#"+image_id).find("#voteUp a").attr('class', 'vote_up_done oneLine');
This looks like a serious typo that you have. Your quotes are scrambled.
Snippet
$(function () {
$(".actions a").click(function () {
if ($(this).hasClass("disabled"))
return false;
$(this).closest(".actions").find(".disabled").removeClass("disabled");
$(this).addClass("disabled");
return false;
});
});
* {padding: 0; margin: 0; list-style: none; font-family: 'Segoe UI'; text-decoration: none; color: #000;}
li {padding: 5px; border: 1px solid #999; width: 200px; border-radius: 3px; margin: 10px;}
li .actions {overflow: hidden; padding: 3px;}
li .actions a {float: right;}
li .actions a:first-child {float: left;}
li .actions a.disabled, li .actions a.disabled i {color: #999;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<ul>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/1" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/2" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/3" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/4" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
<li>
<div class="image"><img src="http://lorempixel.com/200/100/animals/5" alt="" /></div>
<div class="actions"><i class="fa fa-thumbs-up"></i> Vote Up<i class="fa fa-thumbs-down"></i> Vote Down</div>
</li>
</ul>

The .find should be outside the quote, because it's not part of the jquery selector. '#voteUp' is a jquery selector and should be in quotes, while find is a javascript method that operates on the result of a selector.