Develop Reference

Add class to element based on its index

Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});

To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>

error in quick box popup in html not working

I have a store website in which while clicking the eye icon or expand icon in some images, the quick box shows up with some description.
<div class="ImageWrapper">
<div class="product-button">
<a href="javascript:void(0)" id="promise-solitaire-ring-mount" class="quick-view-text">
<i class="zmdi zmdi-eye"></i>
</a>
<a href="products\promise-solitaire-ring-mount.html">
<i class="zmdi zmdi-link"></i>
</a>
<div class="add-to-wishlist">
<div class="show">
<div class="default-wishbutton-promise-solitaire-ring-mount loading">
<a class="add-in-wishlist-js btn" href="promise-solitaire-ring-mount">
<i class="fa fa-heart-o"></i>
<span class="tooltip-label">
Add to wishlist
</span>
</a>
</div>
<div class="loadding-wishbutton-promise-solitaire-ring-mount loading btn" style="display: none; pointer-events: none">
<a class="add_to_wishlist" href="promise-solitaire-ring-mount">
<i class="fa fa-circle-o-notch fa-spin"></i>
</a>
</div>
<div class="added-wishbutton-promise-solitaire-ring-mount loading" style="display: none;">
<a class="added-wishlist btn add_to_wishlist" href="pages\wishlist.html">
<i class="fa fa-heart"></i>
<span class="tooltip-label">
View Wishlist
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-detail">
<div class="product_left">
<a href="collections\new-arrivals\products\promise-solitaire-ring-mount.html" class="grid-link__title">
Let Promise Solitaire Ring Mount
</a>
<div class="grid-link__meta">
<div class="product_price">
<div class="grid-link__org_price">
<span class="money">$590.00</span>
</div>
</div>
<span class="shopify-product-reviews-badge" data-id="10109315278"></span>
</div>
The complete files are here.
When I click the icon, the popup is not shown, instead, a light-black shade is shown:
What could be the problem?

Google tag manager get closest a text

i want use custom js variable to get card-title a shop-item-title-link's text for the event label = "product x".
Clicking the click class fa-cart-plus to get the label product x;
Click the image to get the label product x
I've tried this js below, but it gets [object] [object] as the result.
function() {
var el = {{Click Element}};
return $(el).closest('card-title').text('a.shop-item-title-link');
}
HTML
<div class="card card-product">
<div class="card-image">
<a href="#" title="product x">
<img width="230" height="230" src="#" class="attachment-_thumbnail" alt="product x">
</a>
<div class="ripple-container"></div>
</div>
<div class="content">
<h6 class="category">Items</h6>
<h4 class="card-title">
<a class="shop-item-title-link" href="#" title="product x">product x</a>
</h4>
<div class="card-description">
<p><span>product descirption</span></p>
</div>
<div class="footer">
<div class="price">
<h4><span class="Price"><span class="Price-currencySymbol">£</span>45.00</span></h4>
</div>
<div class="stats">
<a rel="nofollow" href="#" title="Add to cart">
<i rel="tooltip" data-original-title="Add to cart" class="fa fa-cart-plus"></i>
</a>
</div>
</div>
</div>
</div>

That is a very specific target, what you want to do is use parent and sibling together.
Try something like this:
return $(el).parents().siblings('.card-title').text();

How to make an active view type with classlist add and remove?

Ok so I have game list, which is currently styled in a thumbnail kind of view. I have made 3 other classes which when added change the child elements of the list elements to make a list view. I have one which changes the li's themselves, 2 which change the child nodes of that li.
I have two buttons which should control the users preferred view type. They have an active class which stays on to show it is the active view.
So here's the question, how do i select the li's, and there child elements, to replace the view. So when clicked, the list button will add those classes. I will also need the thumbnail view button to remove those classes but i can figure that afterwards.
The markup:
<div id="View">
<button id="boxes" class="btn active" title="Thumnbnail View" onclick="thumbview()">
<i class="fas fa-th"></i>
</button>
<button id="lines" class="btn" title="List View" onclick="listview()">
<i class="fas fa-list-ul"></i>
</button>
</div>
<div id="sortcontainer">
<li class="game" id="75">
<a href="Radiant_Defence.html">
<img src="Games_images/radiantdefence/banner_image.png">
<h2 class="title">Radiant Defence</h2>
<h2 class="date" id="2012">(2012)</h2>
<h3>75/100</h3>
</a>
</li>
<li class="game" id="80">
<a href="plantsvszombies2.html">
<img src="Games_images/Plantsvszombies2/bannerimage.jpg">
<h2 class="title">Plants vs Zombies 2</h2>
<h2 class="date" id="2013">(2013)</h2>
<h3>80/100</h3>
</a>
</li>
<li class="game" id="45">
<a href="link">
<img src="games_category_placeholder.jpg">
<h2 class="title">Some game</h2>
<h2 class="date" id="2017">(2017)</h2>
<h3>45/100</h3>
</a>
</li>
<li class="game" id="80">
<a href="link">
<img src="games_category_placeholder.jpg">
<h2 class="title">Fieldrunners 2</h2>
<h2 class="date" id="2016">(2016)</h2>
<h3>80/100</h3>
</a>
</li>
</div>
And the JavaScript I have so far (still new)
function listview() {
var container = document.getElementById("sortcontainer");
var li = container.getElementsByTagName("li");
for (var i = 0; i < li.length; i++);
li.classList.add("lilistview");
};
Thankyou in advance if anyone has any suggestions

How to play music from label?

I'm making a web application for mp3 music. But i get stuck at one condition.
I'm using Jplayer open source plugin for mp3 music.
This below script is used to play music:
$(document).ready(function () {
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
},
[
{
title: "Lat lg gyi",
artist: "Race 2",
mp3: "Music/Lat Lag Gayi (Race 2)-(FreshMaza.co).mp3",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: false
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function () {
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function (e) {
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if (!$this.hasClass('active')) {
myPlaylist.pause();
} else {
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
});
And here is HTML codes.
<footer class="footer bg-dark">
<div id="jp_container_N">
<div class="jp-type-playlist">
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div>
<div class="jp-interface">
<div class="jp-controls">
<div>
<a class="jp-previous"><i class="icon-control-rewind i-lg"></i>
</a>
</div>
<div>
<a class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div>
<a class="jp-next">
<i class="icon-control-forward i-lg"></i>
</a>
</div>
<div class="hide">
<a class="jp-stop">
<i class="fa fa-stop"></i>
</a>
</div>
<div>
<a class="" data-toggle="dropdown" data-target="#playlist">
<i class="icon-list"></i>
</a>
</div>
<div class="jp-progress hidden-xs">
<div class="jp-seek-bar dk">
<div class="jp-play-bar bg-info">
</div>
<div class="jp-title text-lt">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="hidden-xs hidden-sm jp-current-time text-xs text-muted"></div>
<div class="hidden-xs hidden-sm jp-duration text-xs text-muted"></div>
<div class="hidden-xs hidden-sm">
<a class="jp-mute" title="mute">
<i class="icon-volume-2"></i>
</a>
<a class="jp-unmute hid" title="unmute">
<i class="icon-volume-off"></i>
</a>
</div>
<div class="hidden-xs hidden-sm jp-volume">
<div class="jp-volume-bar dk">
<div class="jp-volume-bar-value lter"></div>
</div>
</div>
<div>
<a class="jp-shuffle" title="shuffle">
<i class="icon-shuffle text-muted"></i>
</a>
<a class="jp-shuffle-off hid" title="shuffle off">
<i class="icon-shuffle text-lt"></i>
</a>
</div>
<div>
<a class="jp-repeat" title="repeat">
<i class="icon-loop text-muted"></i>
</a>
<a class="jp-repeat-off hid" title="repeat off">
<i class="icon-loop text-lt"></i>
</a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen">
<i class="fa fa-expand"></i>
</a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress text-lt"></i>
</a>
</div>
</div>
</div>
</div>
<div class="jp-playlist dropup" id="playlist">
<ul class="dropdown-menu aside-xl dker"> <!-- The method Playlist.displayPlaylist() uses this unordered list -->
<li class="list-group-item"></li>
</ul>
</div>
<div class="jp-no-solution hide">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your
Flash plugin.
</div>
</div>
</div>
</footer>
Which looks like this:
QUESTION
As you see above into my screenshot some labels.
As i click into label it must suppose to play mp3 but the problem is my Javascript code(see above my code for javascript code) is used a particular id which play mp3 on the basis of this.
Here is my label code:
<!--Music working here-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" id="jp_container_N"> <!---->
<div class="item jp-type-playlist"> <!---->
<div class="pos-rlt">
<div class="item-overlay opacity r r-2x bg-black">
<div class="text-info padder m-t-sm text-sm">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o text-muted"></i>
</div>
<div class="center text-center m-t-n">
<div id="jplayer_N" class="jp-jplayer hide"></div> <!---->
<a href="#" class="jp-play">
<i class="icon-control-play i-2x"></i>
</a>
<a href="#" class="jp-pause hid">
<i class="icon-control-pause i-2x"></i>
</a>
</div>
<div class="bottom padder m-b-sm">
<a href="#" class="pull-right">
<i class="fa fa-heart-o"></i>
</a>
<a href="#">
<i class="fa fa-plus-circle"></i>
</a>
</div>
</div>
<a href="#">
<img src="images/p1.jpg" alt="" class="r r-2x img-full">
</a>
</div>
<div class="padder-v">
Lat lag gyi
Race 2
</div>
</div>
</div>
<!--Music working here //END-->
<!--///////////////////////////////END/////////////////////////////-->
As you see into my codes, i can't use a particular same id to play mp3. I get stuck here. Please help!! :(
HELP WOULD BE APPRECIATED!