We Keep Coding

Does JS recursion in for loop breaks after one recursion ends?

I put a main div in it, but for loop broke after one child recursion ends, what should I do to check every children with recusion?
here is output:
direct: DIV main
direct: DIV basicFrame
direct: DIV basicFrame__name
direct: SPAN name
and loop broke after a first recursion ends.
as you can see, after first recursion (main -> basicFrame -> basicFrame__name -> name)
its loop broke (not passed to next children, infoFrame)
output supposed to print these too
direct: DIV infoFrame
direct: SPAN info
..and etc
this is js code
var typeDisplay = async function (target, findType) {
if (findType == "id")
{
target = document.getElementById(target);
target = [target];
}
else if (findType == "direct")
{
console.log("direct: " + target.tagName + " " + target.className); //output maker
target = [target];
}
for (let ind = 0; ind < target.length; ind++)
{
const label = target[ind]; //get label from selection
if (label != null)
{
for (let ind; ind < label.children.length; ind++); //get children of label
{
const subLabel = label.children[ind];
if (typeof(subLabel) == "object")
{
// doing some work
typeDisplay(subLabel, "direct"); //recursion to it's children
}
}
}
}
return;
};
and this is input html form for js script
<div class="main" id="typeTarget"> <!--first parameter of function-->
<div class="basicFrame">
<div class="basicFrame__name">
<span class="name">
wow
</span>
<button class="pen">
<i class="fas fa-file-image"></i>
</button>
</div>
<div class="faceFrame">
<img src="image.png" alt="no image" title="image">
</div>
</div class="infoFrame">
<span class="info">
Info :
<br>
<ul>
<li>this is list</li>
<li>list :
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</span>
</div>
<!--load java script-->
<script>
typeDisplay("typeTarget", "id");
</script>

Why can't I check this checkbox? (CodeIgniter/jQuery UI)

I have a user interface with a list of product images and checkboxes next to each image to 'veto' the product. Suddenly today the checkboxes stopped working, they can't be checked. They were working fine a week ago and no changes have been made to the site recently.
The site was built using CodeIgniter 3.1.2, jQuery UI, Bootstrap and PHP version 7.1.33. A sample of the checkbox code is below. Since everything was working fine last week and no changes have been made recently I have to assume that something it was relying on became unsupported, but I'm not sure where to start troubleshooting. Any suggestions would be appreciated!
Do you see any red flags in the below code that might cause a checkbox to stop working?
<div class="item">
<div class="item__header">
<label class="checkbox">
<input class="largerCheckbox" type="checkbox" id="previewVeto"
disabled onclick="veto('')">
<span class="checkbox__text-checked">Package Vetoed</span>
<span class="checkbox__text-regular">Veto this Package</span>
<span class="checkbox__view">
<svg class="svg-icon-ok"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-ok"></use></svg>
</span>
</label>
</div><!-- item__header -->
<div class="item__image">
<img src=https://i.etsystatic.com/12743396/r/il/b2ae42/2900536844/il_fullxfull.2900536844_jx1j.jpg alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"> </h3>
<p class="item__person">CUSTOMER NAME</p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<label class="checkbox">
<input class="largerCheckbox" type="checkbox" id="previewVeto"
disabled onclick="veto('')">
<span class="checkbox__text-checked">Package Vetoed</span>
<span class="checkbox__text-regular">Veto this Package</span>
<span class="checkbox__view">
<svg class="svg-icon-ok"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-ok"></use></svg>
</span>
</label>
</div><!-- item__header -->
<div class="item__image">
<img src=https://i.etsystatic.com/6792430/r/il/be915c/2355877777/il_fullxfull.2355877777_4x72.jpg alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"> </h3>
<p class="item__person">CUSTOMER NAME</p>
</div><!-- item_info -->
</div><!-- item -->
</div><!-- col-12 -->
<div class="col-12 col-md-4">
<div class="item">
<div class="item__header">
<label class="checkbox">
<input class="largerCheckbox" type="checkbox" id="previewVeto"
disabled onclick="veto('')">
<span class="checkbox__text-checked">Package Vetoed</span>
<span class="checkbox__text-regular">Veto this Package</span>
<span class="checkbox__view">
<svg class="svg-icon-ok"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-ok"></use></svg>
</span>
</label>
</div><!-- item__header -->
<div class="item__image">
<img src=https://i.etsystatic.com/17379511/r/il/ecc770/1845923487/il_fullxfull.1845923487_j02p.jpg alt="">
</div><!-- item__image -->
<div class="item__info">
<h3 class="item__title"> </h3>
<p class="item__person">CUSTOMER NAME</p>
</div>
This is the javascript called by the page...
//run when document is loaded
//uses jquery syntax
$(document).ready(function(){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
//run when mobile-menu-toggle is clicked to show menu
$('.mobile-menu-toggle').click(function(event) {
$(this).toggleClass('active');
$('.mobile-menu').toggleClass('shown');
});
var href = "#positive";
var touched = false;
$('.switcher').click(function(event) {
console.log(touched);
event.preventDefault();
var href_prev = href;
href = $(event.target).attr('href');
if(href_prev != href){
jQuery(href_prev).addClass('hidden');
jQuery(href).removeClass('hidden');
}
if(href === '#negative'){
$(this).addClass('negative');
}else{
$(this).removeClass('negative');
}
var value = jQuery('.switcher').hasClass('negative') ? 'N' : 'P';
jQuery('.keyword-form [name="type"]').val(value);
});
$('.switcher').on('touchend', function(event) {
event.preventDefault();
$(this).toggleClass('negative');
var href_prev = href;
href = href == '#negative' ? '#positive' : '#negative';
if(href_prev != href){
jQuery(href_prev).addClass('hidden');
jQuery(href).removeClass('hidden');
}
var value = jQuery('.switcher').hasClass('negative') ? 'N' : 'P';
jQuery('.keyword-form [name="type"]').val(value);
});
$(".collapse-trigger").click(function(event) {
$(this).toggleClass('expanded').siblings('.collapse-target').slideToggle();
});
$("[name^=country]").on('change', function(){
var checked = $(this).closest('.item-preview').find(':checked');
$(this).closest('.item-preview').siblings('.section-comment').find('.val').text(checked.length);
});
//run when element with id [name=color] is clicked
$("[name^=color]").on('change', function(){
var checked = $(this).closest('.item-preview').find(':checked');
var text = [];
checked.each(function(index, el) {
text.push($(el).data('name'));
});
$(this).closest('.item-preview').siblings('.section-comment').text(text.join(', ') );
});
$('.keyword-edit .keyword').click(function(event) {
event.preventDefault();
var keywords = $(this).closest('.item-preview ').find('.keyword');
$(this).closest('.item-preview').siblings('.section-comment').find('.val').text(keywords.length - 1 ) ;
$(this).remove();
});
var Cookie =
{
set: function(name, value, days)
{
var domain, domainParts, date, expires, host;
if (days)
{
date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toGMTString();
}
else
{
expires = "";
}
host = location.host;
if (host.split('.').length === 1)
{
// no "." in a domain - it's localhost or something similar
document.cookie = name+"="+value+expires+"; path=/";
}
else
{
// Remember the cookie on all subdomains.
//
// Start with trying to set cookie to the top domain.
// (example: if user is on foo.com, try to set
// cookie to domain ".com")
//
// If the cookie will not be set, it means ".com"
// is a top level domain and we need to
// set the cookie to ".foo.com"
domainParts = host.split('.');
domainParts.shift();
domain = '.'+domainParts.join('.');
document.cookie = name+"="+value+expires+"; path=/; domain="+domain;
// check if cookie was successfuly set to the given domain
// (otherwise it was a Top-Level Domain)
if (Cookie.get(name) == null || Cookie.get(name) != value)
{
// append "." to current domain
domain = '.'+host;
document.cookie = name+"="+value+expires+"; path=/; domain="+domain;
}
}
},
get: function(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i=0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0)==' ')
{
c = c.substring(1,c.length);
}
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
},
erase: function(name)
{
Cookie.set(name, '', -1);
}
};
$(document).ready(function(){
$( function() {
var value = parseInt($( ".slide-hungry .inner").data('value'));
$( ".slide-hungry .inner").slider({
min: 0,
max: 5,
step: 1,
range: true,
values: [0, value],
slide: function( event, ui ) {
switch (ui.values[ 1 ] ){
case 0:
jQuery('.slide-target').text('Not Hugry');
break;
case 1:
jQuery('.slide-target').text('A Bit Hugry');
break;
case 2:
jQuery('.slide-target').text('Very Hugry');
break;
case 3:
jQuery('.slide-target').text('Very Very Hugry');
break;
case 4:
jQuery('.slide-target').text('Duying of Huger');
break;
case 5:
jQuery('.slide-target').text('ARGH!!!');
break;
}
}
});
} );
})

ASP.NET MVC Notification - Decrease the Total Number When the Notification is Clicked

I am new in MVC. I do something about the notification thing. The design of the notification part is as follows and I list all notifications in this window:
My Notification Window's Image
I want to reduce the total number of notifications found above when I click on a notification in this window. For example:
Example Image
KulNotBildirimPartial.cshtml:
#model List<NoteModel>
<li class="dropdown dropdown-extended dropdown-notification" id="header_notification_bar">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<i class="icon-bell"></i>
<span class="badge badge-default">#(Model.Where(d=>d.DateSeen==null).Count())</span>
</a>
<ul class="dropdown-menu">
<li class="external">
<h3>
<span class="bold">Notifications</span>
</h3>
View All
</li>
<li>
<ul class="dropdown-menu-list scroller" style="height: 250px;" data-handle-color="#637283">
<li>
#foreach (var item in Model.ToList())
{
<a href="#Url.Action("Detail", "Note", new { IsUserNotificationList = true, ID = item.NoteID })">
<span class="details">
You have a note from the user
#(item.RelatedUserNameSurname)
<br />
<br />
<span class="label label-sm label-default">#((item.AddDate).ToString("dd.MM.yyyy HH:mm"))</span>
</span>
</a>
}
</li>
</ul>
</li>
</ul>
Controller:
[Login]
public PartialViewResult UserNoteNotificationPartial()
{
tbl_User user = Functions.GetUser();
List<NoteNotificationModel> notenotification = Constants.NoteModel.Where(d => d.RelatedUserID == user.ID && d.NoteID != d.NoteID).ToList();
var AddNotification = db.tbl_NoteUserRelation.Where(d => d.RelatedUserID == user.ID).ToList();
if (notenotification.Count > 0)
AddNotification = AddNotification.Where(d => !notenotification.Any(n => n.NoteID == d.tbl_Note.ID)).ToList();
List<NoteNotificationModel> All = AddNotification.Select(d => new NoteNotificationModel
{
Name = d.tbl_Note.Name,
Content = d.tbl_Note.Content,
AddDate = d.tbl_Note.AddDate,
UserWhoAddetItID = d.tbl_Note.UserWhoAddetItID,
RelatedUserNameSurname = (d.tbl_Note.tbl_User.Name + " " + d.tbl_Note.tbl_User.Surname),
RelatedUserID = d.tbl_Note.tbl_User.ID,
NoteID = d.NoteID,
DateSeen=d.DateSeen,
}).ToList();
foreach (var item in All.ToList())
{
notenotification.Add(item);
}
Constants.NoteModel = notenotification.ToList();
return PartialView(notenotification.OrderByDescending(d=>d.AddDate).ToList());
}
How can I do that in the easiest way? If there is any other code block you want to insert, please tell me.

Bulma dropdown not working

Bulma dropdown doesn't seem to toggle on click. Below is the code snippet from the documentation:https://bulma.io/documentation/components/dropdown/
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet"/>
<div class="dropdown is-active">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>

You need to toggle the class is-active using JavaScript. When .dropdown has .is-active it changes the display of .dropdown-menu from none to block.
Here is a basic way to implement it.
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<!--fontawesome required for the icon-->
<i class="fa fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>

Here's a full solution that has worked well for me using vanilla JS and making sure dropdowns close when you click out of them or press the Esc key.
// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
e.stopPropagation();
el.classList.toggle('is-active');
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<body style="margin: 2rem">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
<span>Actions</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
</div>
</div>
</div>
</body>

correction of te answer above:
I added the closeDropdowns() function, because when we click in a second menu, both menus stay opened.
// Get all dropdowns on the page that aren't hoverable.
const dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
if (dropdowns.length > 0) {
// For each dropdown, add event handler to open on click.
dropdowns.forEach(function(el) {
el.addEventListener('click', function(e) {
closeDropdowns();
e.stopPropagation();
el.classList.toggle('is-active');
});
});
// If user clicks outside dropdown, close it.
document.addEventListener('click', function(e) {
closeDropdowns();
});
}
/*
* Close dropdowns by removing `is-active` class.
*/
function closeDropdowns() {
dropdowns.forEach(function(el) {
el.classList.remove('is-active');
});
}
// Close dropdowns if ESC pressed
document.addEventListener('keydown', function (event) {
let e = event || window.event;
if (e.key === 'Esc' || e.key === 'Escape') {
closeDropdowns();
}
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<body style="margin: 2rem">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-ui-actions">
<span>Actions</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Option 1
</a>
<a href="#" class="dropdown-item">
Option 2
</a>
<a href="#" class="dropdown-item">
Option 3
</a>
</div>
</div>
</div>
</body>

I sniffed the javascript source listener on the docs page (I don't know why they don't make this more obvious tbh) and here it is for anyone else who may benefit.
Please note below I commented out a cookies aspect which I did not have defined and was throwing an error and seemed unimportant for my purposes.
"use strict";
document.addEventListener("DOMContentLoaded", function () {
// Search
var setSearchToggle = function setSearchToggle() {
var icon = document.getElementById("searchIcon");
var search = document.getElementById("search");
var input = document.getElementById("algoliaSearch");
if (!icon) {
return;
}
icon.addEventListener("click", function (event) {
search.classList.toggle("bd-is-visible");
if (search.classList.contains("bd-is-visible")) {
algoliaSearch.focus();
}
});
window.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
return search.classList.remove("bd-is-visible");
}
});
};
setSearchToggle();
// Navbar
var setNavbarVisibility = function setNavbarVisibility() {
var navbar = document.getElementById("navbar");
if (!navbar) {
return;
}
var cs = getComputedStyle(navbar);
var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var brand = navbar.querySelector(".navbar-brand");
var end = navbar.querySelector(".navbar-end");
var search = navbar.querySelector(".bd-search");
var original = document.getElementById("navbarStartOriginal");
var clone = document.getElementById("navbarStartClone");
var rest = navbar.clientWidth - paddingX - brand.clientWidth - end.clientWidth - search.clientWidth;
var space = original.clientWidth;
var all = document.querySelectorAll("#navbarStartClone > .bd-navbar-item");
var base = document.querySelectorAll("#navbarStartClone > .bd-navbar-item-base");
var more = document.querySelectorAll("#navbarStartOriginal > .bd-navbar-item-more");
var dropdown = document.querySelectorAll("#navbarStartOriginal .bd-navbar-dropdown > .navbar-item");
var count = 0;
var totalWidth = 0;
var showMore = function showMore() {};
var hideMore = function hideMore() {};
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = all[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var item = _step.value;
totalWidth += item.offsetWidth;
if (totalWidth > rest) {
break;
}
count++;
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
var howManyMore = Math.max(0, count - base.length);
if (howManyMore > 0) {
for (var i = 0; i < howManyMore; i++) {
more[i].classList.add("bd-is-visible");
dropdown[i].classList.add("bd-is-hidden");
}
}
for (var j = howManyMore; j < more.length; j++) {
more[j].classList.remove("bd-is-visible");
}
for (var k = howManyMore; k < dropdown.length; k++) {
dropdown[k].classList.remove("bd-is-hidden");
}
};
setNavbarVisibility();
// Cookies
// var cookieBookModalName = "bulma_closed_book_modal";
// var cookieBookModal = Cookies.getJSON(cookieBookModalName) || false;
// Dropdowns
var $dropdowns = getAll(".dropdown:not(.is-hoverable)");
if ($dropdowns.length > 0) {
$dropdowns.forEach(function ($el) {
$el.addEventListener("click", function (event) {
event.stopPropagation();
$el.classList.toggle("is-active");
});
});
document.addEventListener("click", function (event) {
closeDropdowns();
});
}
function closeDropdowns() {
$dropdowns.forEach(function ($el) {
$el.classList.remove("is-active");
});
}
// Toggles
var $burgers = getAll(".navbar-burger");
if ($burgers.length > 0) {
$burgers.forEach(function ($el) {
if (!$el.dataset.target) {
return;
}
$el.addEventListener("click", function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
$el.classList.toggle("is-active");
$target.classList.toggle("is-active");
});
});
}
// Modals
var rootEl = document.documentElement;
var $modals = getAll(".modal");
var $modalButtons = getAll(".modal-button");
var $modalCloses = getAll(".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button");
if ($modalButtons.length > 0) {
$modalButtons.forEach(function ($el) {
$el.addEventListener("click", function () {
var target = $el.dataset.target;
openModal(target);
});
});
}
if ($modalCloses.length > 0) {
$modalCloses.forEach(function ($el) {
$el.addEventListener("click", function () {
closeModals();
});
});
}
function openModal(target) {
var $target = document.getElementById(target);
rootEl.classList.add("is-clipped");
$target.classList.add("is-active");
}
function closeModals() {
rootEl.classList.remove("is-clipped");
$modals.forEach(function ($el) {
$el.classList.remove("is-active");
});
}
document.addEventListener("keydown", function (event) {
var e = event || window.event;
if (e.keyCode === 27) {
closeModals();
closeDropdowns();
}
});
// Clipboard
var $highlights = getAll(".highlight");
var itemsProcessed = 0;
if ($highlights.length > 0) {
$highlights.forEach(function ($el) {
var copyEl = '<button class="button bd-copy">Copy</button>';
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML("beforeend", copyEl);
var $parent = $el.parentNode;
if ($parent && $parent.classList.contains("bd-is-more")) {
var showEl = '<button class="button is-small bd-show"><span class="icon"><i class="fas fa-code"></i></span><strong>Show code</strong></button>';
$parent.insertAdjacentHTML("afterbegin", showEl);
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML("beforeend", expandEl);
}
itemsProcessed++;
if (itemsProcessed === $highlights.length) {
addHighlightControls();
}
});
}
function addHighlightControls() {
var $highlightButtons = getAll(".highlight .bd-copy, .highlight .bd-expand");
$highlightButtons.forEach(function ($el) {
$el.addEventListener("mouseenter", function () {
$el.parentNode.classList.add("bd-is-hovering");
$el.parentNode.parentNode.classList.add("bd-is-hovering");
});
$el.addEventListener("mouseleave", function () {
$el.parentNode.classList.remove("bd-is-hovering");
$el.parentNode.parentNode.classList.remove("bd-is-hovering");
});
});
var $highlightExpands = getAll(".bd-snippet .bd-expand");
$highlightExpands.forEach(function ($el) {
$el.addEventListener("click", function () {
$el.parentNode.firstElementChild.style.maxHeight = "none";
});
});
var $highlightShows = getAll(".bd-snippet .bd-show");
$highlightShows.forEach(function ($el) {
$el.addEventListener("click", function () {
var text = $el.querySelector("strong").textContent;
var newText = text === "Show code" ? "Hide code" : "Show code";
$el.querySelector("strong").textContent = newText;
$el.parentNode.classList.toggle("bd-is-more-clipped");
});
});
}
setTimeout(function () {
new Clipboard(".bd-copy", {
target: function target(trigger) {
return trigger.previousElementSibling.firstElementChild;
}
});
new Clipboard(".bd-clipboard");
}, 100);
// Events
var resizeTimer = void 0;
function handleResize() {
window.clearTimeout(resizeTimer);
resizeTimer = window.setTimeout(function () {
setNavbarVisibility();
}, 10);
}
window.addEventListener("resize", handleResize);
// Utils
function getAll(selector) {
var parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return Array.prototype.slice.call(parent.querySelectorAll(selector), 0);
}
});

hover over one element and addClass to other elem in Angular JS

Attempting with the below jQuery method: But this does not work in my Angular environment, assuming because I'm attempting to do this outside of angular JS scope methods, but I don't know how to implement this using Angular scope methods (new to angular) any advice?
$('.song-thumb .hover-play').on('mouseenter', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.addClass('hoverclass');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.removeClass('hoverclass');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
count++;
$('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
Full page code:
<script>
$('.song-thumb .hover-play').on('mouseenter', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.addClass('hoverclass');
});
$('.song-thumb .hover-play').on('mouseleave', function(e) {
var elem = $('section.suggestedAlbums img');
elem.trigger(e.type);
elem.removeClass('hoverclass');
});
var count = 0;
$('section.suggestedAlbums img').hover(function() {
count++;
$('[remove]').html('<label remove><br>It triggers the hover event(' + count + ') too.<br></label>');
});
</script>
<!-- <h2>{{trackListData.listTitle}}</h2>
--><div ng-repeat="track in trackListData.tracks track by $index " class="feature-item-homepage fade-animate-nostagger">
<div class="song-thumb" ng-class="{active: $root.currentPlaying.song_id == track.id}">
<!--3 Cases-->
<!--Not the song being played-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);">
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-play play-song"></i>
<img src="img/producer_icon_white.png" class="prod_logo">
<div class="song-title" style="width: 80%;padding-top:25px;">
<a class="song-linking" href="#/song/{{track.id}}">
<h4>{{track.title}}</h4>
<h5>{{track.artist.user_name}}</h5>
</a>
</div>
</div>
<!--The current song but paused-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && !$root.isPlaying" play-music>
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-play play-song"></i>
</div>
<!--The current song but playing-->
<div class="hover-play" ng-if="$root.currentPlaying.song_id == track.id && $root.isPlaying" pause-music>
<i class="fa fa-plus add-to-playlist" ng-init="playlistOption = false" ng-click="$root.initPlaylistOption($event, track.id); $event.stopPropagation();"></i>
<i class="fa fa-pause pause-song"></i>
</div>
<img ng-src="{{(track.albums[0].album_picture? $root.fileServer +'uploads/' + track.albums[0].album_picture:(track.artist.profile_picture? $root.fileServer +'uploads/' + track.artist.profile_picture:'img/defaultalbum.png'))}}" />
</div>
<!-- <div class="song-title-wrap">
<div class="song-title">
<a class="song-linking" href="#/song/{{track.id}}">
<h4>{{track.title}}</h4>
<h5>{{track.artist.user_name}}</h5>
</a>
</div>
</div> -->
</div>

Add a controller to a containing div:
<div ng-controller='MyController'>
Add ngMouseleave and ngMouseenter to the .song-thumb .hover-play element
<div class="hover-play" ng-if="$root.currentPlaying.song_id != track.id" ng-click="$root.playSong(track);" ng-mouseenter='state.hoverPlay=true;' ng-mouseleave='state.hoverPlay=false'>
Add the controller
angular.controller('MyController', [ '$scope', function ($scope) {
$scope.state = {
hoverPlay: false
};
}]);
Use ngClass to add/remove the class
<img ng-class="{ 'hoverclass': state.hoverPlay }" . . . >