<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="01.jpg" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
</div>
I am trying to detect clicks on an <img/> element. I have the following listener:
$('img').addEventListener 'click', ((event) ->
console.log event
), false
...but the event does not fire. How can I detect the click event?
I'd suggest you use .on("click") instead of .click().
$('img').on("click", function() {
console.log("image clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="01.jpg" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
You can use jQuery click event as follows:
$(document).ready(function(){
$("img").click(function(){
alert("The image was clicked.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="portfolio-item">
<div class="hover-bg">
<a href="#">
<div class="hover-text">
<h4>Logo Design</h4>
<small>Branding</small>
<div class="clearfix"></div>
<i class="fa fa-plus"></i>
</div>
<img src="http://placehold.it/140x100" class="img-responsive ng-isolate-scope">
</a>
</div>
</div>
</div>
Related
Why is const filter undefined sometimes when i press it..I have used data-filter on buttons to sort store items..but sometimes when i press a button with dataset filter i get undefined
const buttons = document.querySelectorAll('.filter-btn');
const storeItems = document.querySelectorAll('.store-item');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault()
const filter = e.target.dataset.filter
console.log(filter)
storeItems.forEach((item) => {
if (filter === 'all') {
item.style.display = 'block'
} else {
if (item.classList.contains(filter)) {
item.style.display = 'block'
} else {
item.style.display = 'none'
}
}
})
})
})
.img-wrap img {
width : 300px;
}
<div class="container-fluid store-wrap">
<div class="store-heading">
<h1>OUR <span>STORE</span></h1>
<div class="button-wrap">
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
<button data-filter="cakes" class="filter-btn"><p>CAKES</p></button>
<button data-filter="cupcakes" class="filter-btn"><p>CUPCAKES</p></button>
<button data-filter="sweets" class="filter-btn"><p>SWEETS</p></button>
<button data-filter="doughnuts" class="filter-btn"><p>DOUGHNUTS</p></button>
</div>
<div class="search-wrap">
<div class="icon-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Item...">
</div>
</div>
<div class="row store">
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1089&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359756098-8bc52195bbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
<div class="row store">
<div class="col-lg store-item doughnuts" data-item="doughnuts">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1533910534207-90f31029a78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Doughnuts</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1615837136007-701de6015cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcakes</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item sweets" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359746315-119f1360d663?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
</div>
e.target will refer to the innermost item clicked. If you add an event listener to the container, and the container has a child element, e.target may refer to the container (if you clicked outside the child), or it may refer to the child (if you clicked inside the child). That's what's happening here. If you click directly on one of the texts inside the button, you'll be clicking on a <p> tag, not the button - and that'll be the target.
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
^^^^^^^^^^
Refer to the button you already have in scope instead of to e.target.
const buttons = document.querySelectorAll('.filter-btn');
const storeItems = document.querySelectorAll('.store-item');
buttons.forEach((button) => {
button.addEventListener('click', (e) => {
e.preventDefault()
const { filter } = button.dataset;
console.log(filter)
storeItems.forEach((item) => {
if (filter === 'all') {
item.style.display = 'block'
} else {
if (item.classList.contains(filter)) {
item.style.display = 'block'
} else {
item.style.display = 'none'
}
}
})
})
})
.img-wrap img {
width : 300px;
}
<div class="container-fluid store-wrap">
<div class="store-heading">
<h1>OUR <span>STORE</span></h1>
<div class="button-wrap">
<button data-filter="all" class="filter-btn"><p>ALL</p></button>
<button data-filter="cakes" class="filter-btn"><p>CAKES</p></button>
<button data-filter="cupcakes" class="filter-btn"><p>CUPCAKES</p></button>
<button data-filter="sweets" class="filter-btn"><p>SWEETS</p></button>
<button data-filter="doughnuts" class="filter-btn"><p>DOUGHNUTS</p></button>
</div>
<div class="search-wrap">
<div class="icon-wrap">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
<input type="text" placeholder="Item...">
</div>
</div>
<div class="row store">
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1614707267537-b85aaf00c4b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1603532648955-039310d9ed75?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1089&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359756098-8bc52195bbf4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
<div class="row store">
<div class="col-lg store-item doughnuts" data-item="doughnuts">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1533910534207-90f31029a78e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Doughnuts</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cakes" data-item="cakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1602351447937-745cb720612f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cake</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item cupcakes" data-item="cupcakes">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1615837136007-701de6015cfb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Cupcakes</h3>
<h3>$5</h3>
</div>
</div>
<div class="col-lg store-item sweets" data-item="sweets">
<div class="img-wrap">
<img src="https://images.unsplash.com/photo-1600359746315-119f1360d663?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
<i class="fa-solid fa-cart-shopping"></i>
</div>
<div class="name-price">
<h3>Sweets</h3>
<h3>$5</h3>
</div>
</div>
</div>
</div>
If you had to gain another reference to the element you attached the event listener to and didn't have button already in scope, you could use e.currentTarget instead of e.target - .target will refer to the innermost element (the one that the event was dispatched to), but e.currentTarget will refer to the element the listener is attached to.
The problem is occoured for event deligation. You have a p tag in button. So, for event deligatoin, sometimes click goes to the p tag instead of button. You can fix the issue in this way-
const filter = e.target.closest("button").dataset.filter
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();
I have a div object that should be clickable when it contains the class "clickable". In the Click function I remove the "clickable" class, but it still fires when clicking the object. Will it continue to fire even when I remove the class?
HTML:
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
jQuery:
$("div.vote-wrap > div.circle.clickable").click(function () {
let $circle = $(this);
$circle.removeClass("clickable");
}
because you didn't unbind the event in the click callback.
You just remove the class.
$("div.vote-wrap > div.circle.clickable").click(function() {
let $circle = $(this);
$circle.removeClass("clickable");
$(this).unbind('click');//unbind the click event
alert('clicked , and unbind now!');
})
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
and another way:
$("div.vote-wrap").on('click','div.circle.clickable',(function() {
let $circle = $(this);
$circle.removeClass("clickable");
alert('clicked');
}))
div.vote-wrap > div.circle.clickable {
background:pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">click me
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
Use delegate event on() and unbind the click event with unbind('click') for dynamically created element.
$("div.vote-wrap > div.circle.clickable").on('click',function () {
let $circle = $(this);
$circle.removeClass("clickable");
$circle.unbind('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-wrap" data-id="218" data-index="4" data-filename="gthspill.jpg">
<div class="info-wrap">
<div class="vote-wrap">
<div class="circle clickable" title="Like" data-toggle="tooltip" data-placement="bottom">
<i aria-hidden="true" class="icon exist d-none fas fa-thumbs-up"></i>
<i aria-hidden="true" class="icon no-vote far fa-thumbs-up"></i>
</div>
<div class="existing-wrap d-none">
<div class="inner">
<span class="separator">/</span>
<span class="count">0</span>
</div>
</div>
</div>
<div class="caption-wrap">
<h2 class="caption">Close Up</h2>
</div>
</div>
</div>
The element event handler is attached to is determined when listener is attached, not when the event is emitted.
you could rewrite that code like this:
// element instance is captured once
var $elem = $("div.vote-wrap > div.circle.clickable")
$elem.click(function () {
let $circle = $(this)
$circle.removeClass("clickable")
})
For solution to your problem check the answers of this question: Event binding on dynamically created elements?
I am trying to show an extra row of articles when user clicks 'show more' and I want to remove that row with 'show less'.
I have 4 rows of articles, but I want to start with 2 rows and have the user add one row at a time.
My jQuery might be a little messed up because I took bits and pieces from different places.
I simplified the code by removing the content.
Any idea why it's not working?
<div class="writing-clips">
<div class="row">
<h2>Writing Clips</h2>
</div>
<div class="row clip-container li">
<div class="col span-1-of-4 box" id="story-1" href="#">
<a href="#">
content
</a>
</div>
<div class="col span-1-of-4 box" id="story-2">
<a href="#">
content
</a>
</div>
</div>
<div class="row clip-container clips-2 li">
<div class="col span-1-of-4 box" id="story-5" href="#">
<a href="#">
content
</a>
</div>
<div class="col span-1-of-4 box" id="story-6" href="#">
<a href="#">
content
</a>
</div>
</div>
<div class="row clip-container clips-3 li">
<div class="col span-1-of-4 box" id="story-9" href="#">
<a href="#">
content
</a>
</div>
<div class="col span-1-of-4 box" id="story-10" href="#">
<a href="#">
content
</a>
</div>
</div>
<div class="row clip-container clips-4 li">
<div class="col span-1-of-4 box" id="story-13" href="#">
<a href="#">
content
</a>
</div>
<div class="col span-1-of-4 box" id="story-14" href="#">
<a href="#">
content
</a>
</div>
</div>
</section>
<div class="showmore">showmore</div>
<div class="showless">showless</div>
jquery:
$(document).ready(function(){
size_li = $(".writing-clips .li").size();
x=2;
$('.writing-clips .li:lt('+x+')').show();
$('.showmore').click(function () {
x= (x+1 <= size_li) ? x+1 : size_li;
$('.writing-clips .li:lt('+x+')').show();
});
$('.showless').click(function () {
x=(x-1<2) ? 2 : x-1;
$('.writing-clips .li').not(':lt('+x+')').hide();
});
});
css:
.writing-clips .li { display: none; }
.showmore {
cursor: pointer;
color: green;
}
.showmore:hover { color: blue; }
.showless {
color: red;
cursor: pointer;
}
.showless:hover { color: blue; }
You need to hide all rows before show first two
Add this line
$('.writing-clips .li').hide();
before
$('.writing-clips .li:lt('+x+')').show();
I've re-written your script...
The this is to perform the correct comparison and increment a counter which represent how many are actually shown.
See console logs and comments in code.
$(document).ready(function(){
// Show first four.
var shownOnload = 4;
for(i=0;i<shownOnload;i++){
$(".col").eq(i).show();
}
// Total link we have
var size_li = $(".col").length;
console.log( " Total: " +size_li );
// More handler
$(".showmore").click(function () {
console.log("More clicked!");
if(shownOnload<size_li && shownOnload>=0){
shownOnload++;
console.log("Show #"+shownOnload);
$(".col").eq(shownOnload-1).show();
}
});
// Less handler
$(".showless").click(function () {
console.log("Less clicked!");
if(shownOnload<=size_li && shownOnload>0){
console.log("Hide #"+shownOnload);
$(".col").eq(shownOnload-1).hide();
shownOnload--;
}
});
}); // ready
.col{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="writing-clips">
<div class="row">
<h2>Writing Clips</h2>
</div>
<div class="row clip-container li">
<div class="col span-1-of-4 box" id="story-1" href="#">
<a href="#">
content 1
</a>
</div>
<div class="col span-1-of-4 box" id="story-2">
<a href="#">
content 2
</a>
</div>
</div>
<div class="row clip-container clips-2 li">
<div class="col span-1-of-4 box" id="story-5" href="#">
<a href="#">
content 3
</a>
</div>
<div class="col span-1-of-4 box" id="story-6" href="#">
<a href="#">
content 4
</a>
</div>
</div>
<div class="row clip-container clips-3 li">
<div class="col span-1-of-4 box" id="story-9" href="#">
<a href="#">
content 5
</a>
</div>
<div class="col span-1-of-4 box" id="story-10" href="#">
<a href="#">
content 6
</a>
</div>
</div>
<div class="row clip-container clips-4 li">
<div class="col span-1-of-4 box" id="story-13" href="#">
<a href="#">
content 7
</a>
</div>
<div class="col span-1-of-4 box" id="story-14" href="#">
<a href="#">
content 8
</a>
</div>
</div>
</section>
<div class="showmore">showmore</div>
<div class="showless">showless</div>
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!