We Keep Coding

Toggle class between list elements on click of a button

I need to remove and add a class between elements of a list, if I hit the #swapThumb button it should remove the selected class from the current element and then added to the next element.
Here's what I have
html
<ul id="product-thumbnails" class="thumbnails list-inline">
<li class="vtmb vt-123 selected" style="">
<img src="https://via.placeholder.com/100x100">
</li>
<li class="vtmb vt-456" style="">
<img src="https://via.placeholder.com/100x100">
</li>
<li class="vtmb vt-789" style="display: none">
<img src="https://via.placeholder.com/100x100">
</li>
<li class="vtmb vt-101" style="">
<img src="https://via.placeholder.com/100x100">
</li>
<li class="vtmb vt-121" style="display: none">
<img src="https://via.placeholder.com/100x100">
</li>
</ul>
<button id="swapThumb">Next</button>
javascript
let thumbsNailsList = $('#product-thumbnails').find('li');
let swapButton = $('#swapThumb');
thumbsNailsList.each((index, item) => {
let thumbsAvailable = $(item).attr('style');
if (thumbsAvailable === '') {
$(swapButton).on('click', () => {
$(item).removeClass('selected');
$(item).closest($(item)).next().addClass('selected');
});
}
});
First I'm checking if the li element has an empty style attribute (this is needed), if so, trigger the click validation.
The click should remove the selected class from the first element and then added to the next one and so on (it should match the empty style attribute). Once the selected class hits the last element of the list it should return the class to the first element.

This code snippet will change the class of the element beneath it to selected and remove it from the current one, while keeping all the other classes. It will also loop back to the beginning element if next is clicked when on the last element. I've heard jQuery functions are more expensive that document functions and shouldn't be used for these kinds of things. Apply this to your problem and you should get the expected result
let i = 0;
let thumbsNailsList = document.getElementById("product-thumbnails").children;
let btn = document.getElementById("btn");
btn.onclick = function() {
var prevClasses = thumbsNailsList[i].className;
thumbsNailsList[i].className = prevClasses.replace("selected", "");
i = (i+1) % thumbsNailsList.length;
thumbsNailsList[i].className = "selected";
console.log(thumbsNailsList);
}
<ul id="product-thumbnails">
<li class='selected'></li>
<li class=''></li>
<li class=''></li>
<li class=''></li>
</ul>
<button id="btn">Next</button>

Angular 2 filter and toggle function not working as expected

I have created a hamburger menu and there is toggle function for displaying subcategories this toggle function is working fine until i apply filter on them. After searching a category through filter toggle function not working.
this is my html code
<ul class="nav navbar-nav">
<div id="menuToggle" class="sidenav">
<ul id="menu">
<li>
<input class="form-control" type="search" [(ngModel)]="txtToSearch" placeholder="Search"/>
</li>
<li *ngFor="let category of (componentContents.dashboardMenu | dashboardFilter : txtToSearch); let i = index" >
<p class="toggleMenu" (click)="toggleMenu(i,componentContents.dashboardMenu)">{{category.category}}
</p>
<div *ngIf="category.show">
<ul id="{{(category.category).split(' ').join('-')}}" *ngIf="category.subCategory.length > 0">
<li *ngFor="let subCat of category.subCategory">
<a routerLink={{subCat.router}} routerLinkActive="active">
<span class="glyphicon glyphicon-bell" ></span>{{subCat.subcategory}} </a></li>
</ul>
</div>
<hr />
</li>
</ul>
in component.ts im using this code for toggle function
toggleMenu(index, catArry) {
if (catArry[this.prevClicked] && this.prevClicked !== index) {
catArry[this.prevClicked].show = false;
}
catArry[index].show = !catArry[index].show;
this.prevClicked = index;
}

The index variable is applicable only to the current result. So when the filter is applied, the result changes and the index does not correspond to the actual position of element in array.
You can pass the category itself to the toggleMenu(category, catArray) function instead of index and calculate the index in toggleMenu function using catArray.indexOf(category)

changing span text in li using angularjs

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;
}

To add class="current" Dynamically

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');

How to order a list in HTML based on the list item id

I'm sure that this is similar to another question that has been asked, but I looked for a solid hour and couldn't find anything quite right.
I have an un-ordered list where I want the list items to have have an index, so I'm just making their ID to be the index I desire. So it's going to look something like:
<ul>
<li id="1"> item1 </li>
<li id="2"> item2 </li>
<li id="3"> item3 </li>
<li id="4"> item4 </li>
</ul>
Now I have a div that works as a drop down box, which changes the theme of the page as you click on each list item. What I want, is something that will be able to change the id of the list item, and than re-order them so that the selected one is now the first item. So lets assume that I clicked on item3, what I'd ideally like to be the result is something that looks like.
<ul>
<li id="1"> item3 </li>
<li id="2"> item1 </li>
<li id="3"> item2 </li>
<li id="4"> item4 </li>
</ul>
Granted, I'm sure there are other ways of doing it, but I'm trying to change the framework of the project as little as possible, so I'm thinking that this is ideally what I want. The content for each item should obviously stay the same, but the id will change based on where in the list it should be. I hope this isn't too obscure, it seems like something that shouldn't be overly hard but I can't figure it out since I'm new to coding JS / html.

Javascript solution:
Demo
var ul = document.getElementById("list");
var list = ul.children;
for(var i=0; i<list.length; i++){
list[i].onclick = function(){
if(i > 0){
ul.removeChild(this);
ul.insertBefore(this, list[0]);
for(var j=0; j<list.length; j++){
list[j].id = j+1;
}
}
};
}

Use flex-box layout and order property. You can ordering your html elements using only CSS.
Here is a simple snippet:
ul.ordered {
display: flex;
flex-direction: column;
}
<h1>Without Flex</h1>
<ul>
<li id="4"> item 4 </li>
<li id="2"> item 2 </li>
<li id="1"> item 1 </li>
<li id="3"> item 3 </li>
</ul>
<h1>With Flex Order</h1>
<ul class="ordered">
<li id="4" style="order: 4"> item 4 </li>
<li id="2" style="order: 2"> item 2 </li>
<li id="1" style="order: 1"> item 1 </li>
<li id="3" style="order: 3"> item 3 </li>
</ul>
Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Try this logic... It might works... Please check this Fiddle for demo..
$('li').on({
click: function (e) {
var all = $("#rootUl").children("li");
var index = all.index($(e.target));
var current = e.target.innerHTML;
if (index > 0) {
for (var i = index - 1; i >= 0; i--) {
all[i + 1].innerHTML = all[i].innerHTML;
}
}
all[0].innerHTML = current;
}
});