I have a list of li items with functions attached to them. I also have an event listener which attaches a class of "current" to whichever li item is being clicked.
HTML
<ul class="cf" id="filter">
<li ng-click="getRadius(5)" class="current">5 km</li>
<li ng-click="getRadius(10)">10 km</li>
<li ng-click="getRadius(25)">25 km</li>
<li ng-click="getRadius(50)">50 km</li>
<li ng-click="getRadius(100)">100 km</li>
</ul>
Is there a way to disable the ng-click event if that specific li item has a class of "current" or is there a better way to go about this?
You cannot disable a list cause its not a interactive element can use ngClass to apply a specific class when disabled to make it appear disabled:
<li ng-class="{'disabled':condition}"ng-click="getRadius(5)">item</li>
You can use ng-if to remove those items completely from the list:
<li ng-if="!condition" ng-click="getRadius(5)">item</li>
<li ng-if="condition" >item</li>
If you use button tag as trigger instead of li, you can use ng-disabled directive to permit click by a condition. For example:
<ul class="cf" id="filter">
<li><button ng-click="getRadius(5)" ng-disabled="current!=5">5 km</button></li>
<li><button ng-click="getRadius(10)" ng-disabled="current!=10">10 km</button></li>
<li><button ng-click="getRadius(25)" ng-disabled="current!=25">25 km</button></li>
<li><button ng-click="getRadius(50)" ng-disabled="current!=50">50 km</button></li>
<li><button ng-click="getRadius(100)" ng-disabled="current!=100">100 km</button></li>
</ul>
If you want, you can customize button style and you can show it like a standart text element.
.cf button {
border: none;
background: none;
}
// template
<ul class="cf" id="filter">
<li ng-click="!clickLi[5] && getRadius(5)" class="current">5 km</li>
<li ng-click="!clickLi[10] && getRadius(10)">10 km</li>
<li ng-click="!clickLi[25] && getRadius(25)">25 km</li>
<li ng-click="!clickLi[50] && getRadius(50)">50 km</li>
<li ng-click="!clickLi[100] && getRadius(100)">100 km</li>
</ul>
// controller
function MyController($scope) {
$scope.clickLi = {
5: true
};
$scope.getRadius = function(li_id) {
$scope.clickLi[li_id] = true;
console.log(li_id);
};
}
A demo on JSFiddle.
Possible workaround:
If you need a single selection you can add variable into the scope specifying which row is selected and generate your list with the ng-repeat, then you can add lazy checking on ng-click if current $index is equal to selected index, you can use the same condition to apply current class with ng-class.
For example:
app.js
$scope.selected = 0;
$scope.distances = [5, 10, 25, 50, 100];
app.html
<ul class="cf" id="filter">
<li ng-repeat = "distance in distances" ng-click="($index == selected) || getRadius(distance)" ng-class="{'current':($index == selected)}">{{distance}} km</li>
</ul>
Related
I want to change 9 of the names in the UL to a red font using a on click button, while the other 3 names remain in a black font. And I want a button to reset the red fonts back to their original font. Can anyone help?
var title = document.getElementById("title");
var buttons = document.getElementsByClassName("btn");
var buttons = document.getElementsByClassName("btn2");
for (var btnIndex = 0; btnIndex < buttons.length; btnIndex++) {
buttons[btnIndex].onclick = function() {
title.style.color = this.getAttribute('data-color');
}
} else {
title1.style.color = this.getAttribute('data-color');
}
<ul>
<li id="title">John</li>
<li id="title">Jack</li>
<li id="title">Joe</li>
<li id="title1">Jim</li>
<li id="title">David</li>
<li id="title">Sam</li>
<li id="title1">Jay</li>
<li id="title">Frank</li>
<li id="title">Tim</li>
<li id="title">Zack</li>
<li id="title">Lewis</li>
<li id="title1">Danny</li>
<button class="btn" data-color="red">Change 9 names to red</button>
<button class="btn2" data-color="black">Reset</button>
</ul>
There are a couple of problems with your markup, which I'll address below, but to answer your actual question, you can do something like this:
// get references to the buttons
const button1 = document.querySelector('.btn');
const button2 = document.querySelector('.btn2');
// declare a function that adds the class 'red' to items matching the given selector
const select = selector => {
[...document.querySelectorAll(selector)].forEach(
element => element.classList.add('red')
);
}
// declare a function that removes the given class from all elements that currently have it
const deselect = className => {
[...document.querySelectorAll('.' + className)].forEach(
element => element.classList.remove(className)
);
}
// add a click handler to the button that invokes the
// select function above for items whose class includes 'title'
button1.addEventListener('click', () => select('.title'));
// add a click handler to the second button that removes the 'red' class from all items
button2.addEventListener('click', () => deselect('red'));
.red {
color: red;
}
<ul>
<li class="title">John</li>
<li class="title">Jack</li>
<li class="title">Joe</li>
<li class="title1">Jim</li>
<li class="title">David</li>
<li class="title">Sam</li>
<li class="title1">Jay</li>
<li class="title">Frank</li>
<li class="title">Tim</li>
<li class="title">Zack</li>
<li class="title">Lewis</li>
<li class="title1">Danny</li>
</ul>
<button class="btn" data-color="red">Change 9 names to red</button>
<button class="btn2" data-color="black">Reset</button>
a more efficient solution
This may not suit your needs, but if you just want to change the color of title items you could toggle a class on the <ul> and apply a css rule:
// get references to the button and ul
const button = document.querySelector('.btn');
const ul = document.querySelector('ul');
// toggle a class on the ul
button.addEventListener('click', () => ul.classList.toggle('red'));
/*
color 'title' items when the
ul has the 'red' class
*/
ul.red .title {
color: red;
}
<ul>
<li class="title">John</li>
<li class="title">Jack</li>
<li class="title">Joe</li>
<li class="title1">Jim</li>
<li class="title">David</li>
<li class="title">Sam</li>
<li class="title1">Jay</li>
<li class="title">Frank</li>
<li class="title">Tim</li>
<li class="title">Zack</li>
<li class="title">Lewis</li>
<li class="title1">Danny</li>
</ul>
<button class="btn">Toggle 'title' items to red</button>
markup issues
id attributes must be unique within a document. if you need to attach the same identifier to multiple elements use class instead.
<button> cannot be a child of <ul>.
First, id values must be unique, so you should be using class to
organize the similar <li> elements and use id to uniquely
identify the two buttons.
Also, the only elements that can be a child of a <ul> are <li>,
<script> and <template> elements, not <button>, so the buttons
have to be moved out of the ul.
From there, it's just a matter of setting the two buttons click handlers to the same event handler that loops over the li elements with the given class (not the buttons as you are trying to do) and adds or removes a pre-made class to the list depending on which button was clicked.
// test.js contents
document.getElementById("btn").addEventListener("click", changeColor);
document.getElementById("btn2").addEventListener("click", changeColor);
let items = document.querySelectorAll(".title");
function changeColor(event){
items.forEach(function(item){
// Figure out which button got us here
if(event.target.id === "btn"){
item.classList.add("red"); // Add red
} else {
item.classList.remove("red"); // Remove red
}
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the Certain Font Color with JavaScript</title>
<style>
.red {color:red;}
</style>
</head>
<body>
<ul>
<li class="title">John</li>
<li class="title">Jack</li>
<li class="title">Joe</li>
<li class="title1">Jim</li>
<li class="title">David</li>
<li class="title">Sam</li>
<li class="title1">Jay</li>
<li class="title">Frank</li>
<li class="title">Tim</li>
<li class="title">Zack</li>
<li class="title">Lewis</li>
<li class="title1">Danny</li>
</ul>
<button id="btn">Change 9 names to red</button>
<button id="btn2">Reset</button>
<script src="test.js"></script>
</body>
</html>
Additional notes:
You'll want to stay away from using .getElementsByClassName().
Rather than looping with counter indexes, it's much simpler to use
the Array.forEach() method on the collection returned from .querySelectorAll().
You should avoid using inline styles whenever possible as they are the hardest to override and to maintain. Instead, add, remove, or toggle the use of CSS classes with the .classList API, which is much simpler to use.
<ul id="myList">
<li class="list" data-pos="Noah">pass</li>
<li class="list" data-pos="Liam">fail</li>
<li class="list" data-pos="James">average</li>
</ul>
Now I want to create a JavaScript function that will add new class, when click on it.
click (data-pos="Noah") add class Noah1
click (data-pos="Liam") add class Liam1
click (data-pos="James") add class James1
Expected Result After Click
<ul id="myList">
<li class="list Noah1" data-pos="Noah">pass</li>
<li class="list Liam1" data-pos="Liam">fail</li>
<li class="list James1" data-pos="James">average</li>
</ul>
How can I do that? with JavaScript
var changeFunc -> (e) {
document.getElementById(...).classList.add((this.querySelector(":selected").getAttribute("data-pos") + "1"));
}
document.querySelector(".myList").addEventListener("change",changeFunc);
Here is working solution, just get data-pos attribute and add it to classList
function clickEvent(event) {
event.target.classList.add(event.target.getAttribute('data-pos') + "1")
console.log(event.target.classList)
}
document.querySelector('ul').addEventListener('click', clickEvent, false);
<ul class="myList">
<li class="list" data-pos="Noah">pass</li>
<li class="list" data-pos="Liam">fail</li>
<li class="list" data-pos="James">average</li>
</ul>
One-liner solution:
document.querySelectorAll('ul>li.list').forEach(li=>{li.onclick=function(){const attr=li.getAttribute('data-pos');if(!(attr in li.classList))li.classList.add(attr);}});
I have html something like...
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">arrow_down</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">arrow_down</span>
<li>
<ul>
on ng-click=makeActive(), I want to change the value 'arrow_down' to 'arrow_right' of that particular < li> element only. and if again the same is clicked I want to change it to 'arrow_down'. Rest all < li> will have span text unchanged. How can I do this using angularjs? i.e. by using angular.element? OR is there any other way?
keyboardArrow refers to only one variable. So you have to create two scope variables: keyboardArrow1 and keyboardArrow2
<ul id="sidemenu" class="wraplist wrapper-menu">
<li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)">
<span class="arrow material-icons">{{ keyboardArrow1 }}</span>
<li>
<li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)">
<span class="arrow material-icons">{{ keyboardArrow2 }}</span>
<li>
<ul>
Update
According to your needs, here is a plunker.
Updated my answer from our discussion in comments.
1) In your controller, define keyboardArrow1 and keyboardArrow2:
$scope.keyboardArrow1 = 'A';
$scope.keyboardArrow1 = 'B';
2) You can now display theses values like this:
<ul>
<li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)">
{{keyboardArrow1}}
</li>
<li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)">
{{keyboardArrow2}}
</li>
</ul>
Note that I also changed the ng-class condition.
3) When clicking a <li>, call makeActive():
$scope.makeActive = function(arrow) {
$scope.active = arrow;
}
I have a markup for <ul> as below:
<ul>
<li class="">Insulated And Extruded</li>
<li class="">Grille Type Rolling</li>
<li class="active2">PVC High Speed Doors</li>
<li class="">Swinging doors</li>
</ul>
Here I want to check li has a class named active2, and if it does then I need to remove that class and need to add different class to that li.
This is how I tried it in jQuery:
if($('ul li').hasClass('active2')) {
$(this).removeClass('active2').addClass('active1');
}
But it doesn't work.
Can anybody help me to figure this out?
To use hasClass() you'd need to loop through all the li elements and check them individually.
However there's no need for hasClass() here at all as you can select the .active2 elements directly and call toggleClass() on them, like this:
$('ul li.active2').toggleClass('active2 active1');
.active1 { background-color: yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="">Insulated And Extruded</li>
<li class="">Grille Type Rolling</li>
<li class="active2">PVC High Speed Doors</li>
<li class="">Swinging doors</li>
</ul>
You do not need hasClass(), You can simply do this :
$('ul li.active2').removeClass('active2').addClass('active1');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="">Insulated And Extruded</li>
<li class="">Grille Type Rolling</li>
<li class="active2">PVC High Speed Doors</li>
<li class="">Swinging doors</li>
</ul>
I have Menu list which contains Sub-Menu as shown in the code below.
<li class="current">
<span class="icon4"></span>Subscriptions
<ul class="sub-menu">
<li>View Subscriptions
</li>
<li class="#((ViewBag.PageName == " Subscription ") ? "active " : " ")">Manage Subscription Plans
</li>
</ul>
</li>
<li class="current">
<span class="icon5"></span>Administration
<ul class="sub-menu">
<li class="#((ViewBag.PageName == " AssetPage ") ? "active " : " ")">Assets
</li>
<li>Configure Text
</li>
<li>Error Log
</li>
<li>Product Settings
</li>
</ul>
</li>
<li class="current">
<span class="icon6"></span>Promo Codes
<ul class="sub-menu">
<li>Manage Promo Code
</li>
<li>Used Promo Code
</li>
</ul>
</li>
Here Subscription,Administration,Promo Codes are Menu Lists which contains Sub-Menu Lists under them.
The thing is I want to apply class=current dynamically when a user clicks on Subscription,Administration,Promo Codes`.
And I am doing this in LayoutPage of MVC.
Any help will be appreciated.
Here you have a working solution: https://jsfiddle.net/c4h3sup9/
You have to use a little bit of Javascript for that.
You have to give the listitems a other class name like in my example "operator"
document.body.addEventListener("click", function(e){
if(e.target && e.target.className == "operator"){
var actives = document.getElementsByClassName("active");
actives[0].setAttribute("class", "operator");
e.target.setAttribute("class", "active");
}
});
for this example you need to assing one element as active from the beginning.
Note:
LI elements are never parents of UL.
The order is:
Unordered List (Plural) -> List item (Singular, Child).
You might want to correct that as it is not standard conform.
To add the class name to the parent <li> element, give the main links a class name. Assuming you also want to remove it from any <li> elements that already have it, also give them a class name
<li class="container">
<span class="icon4"></span>Subscriptions
and the script will be
$('.mainmenu').click(function() {
$('.container').removeClass('current'); // remove any previous
$(this).closest('.container').addClass('current');
});
In addition, if when you navigate to one of the views with this layout, and what to add the class name to the appropriate element, then you can give the <li> elements an id attribute
<li id="subscriptions" class="container">
....
</li>
<li id="administration" class="container">
....
and in the GET method, pass the value of the id to the view (e.g. using ViewBag
public ActionResult ConfigureText()
{
ViewBag.Menu = "administration";
....
return View(...);
}
and add a script that runs when the page first loads
var menu = '#ViewBag.Menu";
$('#' + menu).addClass('current');