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");
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying to add this to a div in my document but the selection items are all stacking on top of each other even though I'm setting them up in different columns. I think its because I am looping through it and its creating an exact copy of itself and they're stacking on each other. CSS wont fix it either. I've tried wrapping the col-md-3 class outside of the div thats outputting the javascript no luck. I'm really stuck. When I've used React its been easy to do stuff like this with JSX, but I'm having trouble here. Also I should mention that the classes aren't linked to any css. I just named them but they don't do anything. All the styles are inline and can be seen in the jquery.
for (var i = 0; i < works.length; i++) {
$('#work-items').append("\
<div class='col-md-3'>\
<div class='portfolio-item'>\
<span class='work-name'" + works[i].name + " ></span>\
<a href='" + works[i].link + "' class='work-img weblink' style='text-decoration: none; font-size: 1.2em; color:salmon'>\
<img class='img-responsive img-thumbnail' style='height: 150px; width: 300px' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'></p>" + works[i].title + " </span > \
</a >\
<a href='" + works[i].github + "' class='work-img github' style = 'text-decoration: none; color: DodgerBlue; font-size: 1.2em' > \
</a >\
</div >\
</div >\
");
}
I doubt this is needed but heres the array of objects I'm getting the data from.
var works = [
{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
},
]
Link to HTML/CSS Output
Here is the rendered HTML
<html lang="en">
<body>
<div class="container">
<h1 class="name">jJonathan</h1>
<h4 class="title">...</h4>
</div>
<div class="container">
<div id="work-items" class="row">
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/BikesberlinCollage.jpg"> <span class="info"><p class="proj-title"></p>Ecommerce Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" vue=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/projekt.png"> <span class="info"><p class="proj-title"></p>Project Manager</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/recipeapp.png"> <span class="info"><p class="proj-title"></p>Recipe Sharing App</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/jobs.png"> <span class="info"><p class="proj-title"></p>Job Board Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/weather.png"> <span class="info"><p class="proj-title"></p>Weather Checker</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" react="" |="" firebase="" redux=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/planner.png"> <span class="info"><p class="proj-title"></p>Planner</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/form.png"> <span class="info"><p class="proj-title"></p>Javascript Form</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/reactchat.png"> <span class="info"><p class="proj-title"></p>React Chat App</span> Github </div>
</div>
</div>
</div>
<script src="js/work.js"></script>
<script src="js/script.js"></script>
Assuming you are using bootstrap I have to ask if the #work-items has a class of "row".
Besides that, one wonders if the css for any of the non-bootstrap elements you are adding, here, is getting in the way.
If you replace all of the html inside col-md-3 with simple works[i].link does the wrong behavior still occur?
Can you check on padding and margin provided to the CSS classes portfolio-item and work-items also can you try once with col-lg-3 class, I doubt your screen resolution may be leading to the view optimized for mobile where divs are stacked oon top of each other, although in the snapshot the screen size doesn't appear to be an issue.
Spent hours trying to figure this out. Thanks alot for the help. I had an extra character in my bootstrap CDN link. Sorry for wasting everyone's time -_-.
Besides the code you provided works as expected in a minimal environment (which means you should inspect your .col- elements and see which rule messes the position property), here's how you can create and apply a template over an array of items:
How to append data to DOM using a loop or .map()
var works = [{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
}
];
const template_item = ({name,title,pic,link,github}) => `
<div class="col-md-3">
<div class="portfolio-item">
<h4 class="work-name">${name}</h4>
<a href="${link}" class="work-img weblink">
<img class="work-thumb img-responsive img-thumbnail" src="${pic}" alt="${title}">
</a>
<p>
${title}
GitHub: ${github.substring(github.lastIndexOf("/")+1)}
</p>
</div>
</div>`;
const items = works.map(template_item);
$('#work-items').append(items);
.work-img {
text-decoration: none;
}
.work-thumb.img-thumbnail {
height: 150px;
width: 300px;
}
.work-link,
.work-github {
font-size: 1.2em;
color: salmon;
}
.work-github {
color: dodgerblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div id="work-items" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PS:
Loop only to create/concatenate strings or prepopulate an array with your items Elements
Append only once! (not multiple times inside a loop)
Don't wrap <p> inside <span>
Do use alt tags
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
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.
I am making new question thread, because I wasn't clear and I agree with that.
So, I have clickable item-cards, if you click on one the class name changes to selected and it also adds the item which you click on to the cart. Each cart item has X behind, if you click it, it will remove the item from the cart, but it doesn't remove the selected part. If I added there that it would remove that class, then it removed it from all items. Example, if I add 2 items in cart and I deleted one from the cart, then it removed the selected class from all, but how could I make it so it would only removes it from, which has same img title? Here are some examples:
Selected Item HTML
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" 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: $110.52 (You save: $-39.06)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>
Code, if you click on X
$("#itemcart span").click(function() {
$(this).parent().remove()
Code how X is being added
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
Clicking on item-card
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
$("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
$("#itemcart span").click(function() {
$(this).parent().remove()
$(".item-card").removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});
Try this, save selected item in data and get it on click:
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
$("#itemcart").append(cart_item);
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
var self = $(this);
cart_item.on('click', 'span', function() {
$(this).parent().remove()
self.removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});
Here's a running snippet with fake entries. You have to adapt indentifiers to your dynamic code.
Delegate event listening to the <ul> element. Listen to clicks on the <ul><li><div><span> element and remove the <li> 2 parents upward.
<html>
<body>
<ul class="item-store">
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1000">
<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: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1001">
<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: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
//Code, if you click on X
$(".item-store").on('click', '.item-card span', (function() {
$(this).parent().parent().remove();
}));
//Code how X is being added
//$(".item-cart div").each(function()
$(".item-card ").each(function()
{
if( $(this).children().length > 0){
$(this).append($("<span> x</span>"));
} else{
$(this).append($("<span> X</span>"));
}
});
</script>
</body>
</html>
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.