I have a lot of items defined by del1, del2, del3 and so on.
How do I set my .click to be .del1 delete(1) and .del2 delete(2)?
<li>
http://www.
<a href="#">
<img class="del1" src="images/page_white_delete.png" title="Delete">
</a>
</li>
<li>
http://www.
<a href="#">
<img class="del2" src="images/page_white_delete.png" title="Delete">
</a>
</li>
jQuery:
$(".del1").click(function(){
favs.webdb.deleteTodo(1);
});
The old code was written like this:
<li>http://www.tes.com
<a href="javascript:void(0);" onclick="favs.webdb.deleteTodo(1);">
<img src="images/page_white_delete.png" title="Delete">
</a></li>
I also think I might have to do a jquery live click because the webdb doesn't load until the page finishes loading.
Use a generic class and a data-* attribute:
<img class="del" data-number="1" src="images/page_white_delete.png" title="Delete">
<img class="del" data-number="2" src="images/page_white_delete.png" title="Delete">
$(".del").click(function(){
favs.webdb.deleteTodo($(this).data("number"));
});
If you can't modify the HTML, you can extract the number from the class name:
$('img[class^="del"]').click(function() {
var class = $(this).attr('class');
var number = parseInt(class.slice(3), 10);
favs.webdb.deleteTodo(number);
});
you'd better set a special attribute like:
<img class="del" data-node-id="1" src="images/page_white_delete.png" title="Delete">
then:
$('img.del').click(function(){
favs.webdb.deleteTodo( $(this).data('node-id') );
})
Related
This question already has answers here:
Change an image with onclick()
(10 answers)
Closed 1 year ago.
I have a menu with images like icons, when I click on one of them it will show something different, and I'd like to change the image when it's 'active', turn it into red and back in grey when I click on the next one, I'm sure if I'm clear. I've tried a lot of thing but nothing actually works.
How it looks right now
how it's supposed to look
and when I click on the next one
so here's my actual code, its 100% html/css but i can also use JS
thank you
<div class="filter-foodmenu-tab">
<ul class="nav nav-tabs" role="tablist">
<li>
<a data-toggle="tab" href="#foodmenu1" role="tab"><span>
<img src="menu/cat-midi_grey.png" width="40px" class="foodmenu1" id ="img1" onclick="changeImage()"></span><br/><br/>
formule midi</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu2" role="tab"><span>
<img src="menu/cat-entree_grey.png" width="40px" class="foodmenu2" id ="img2"></span><br/><br/>
entrées</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu3" role="tab"><span>
<img src="menu/cat-piadina_grey.png" width="40px" class="foodmenu3" id="img3" ></span><br/><br/>
piadinas</a>
</li>
<li>
<a class="active" data-toggle="tab" href="#foodmenu3-1" role="tab"><span>
<img src="menu/cat-piadina_grey-1.png" width="40px" class="foodmenu3-1" id="img4"></span><br/><br/>
la pinsa</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu4" role="tab"><span>
<img src="menu/cat-pates_grey.png" width="40px" class="foodmenu4" id="img5"></span><br/><br/>
pâtes</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu5" role="tab"><span>
<img src="menu/cat-dessert_grey.png" width="40px" class="foodmenu5" id="img6"></span><br/><br/>
desserts</a>
</li>
<li>
<a data-toggle="tab" href="#foodmenu6" role="tab"><span>
<img src="menu/cat-bambino_grey.png" width="70px" class="foodmenu6" id="img7"></span><br/>
menu bambino</a>
</li>
</ul>
</div>
You can use a simple JS function for that.
First of all, add the onclick="changeImage(this);" to every img tag you want to handle it's click event.
Then, add this html tag to contain the JS code:
<script>
var prevImage = undefined;
function changeImage(imgElement) {
if(prevImage) {
prevImage.src = prevImage.src.replace('red', 'grey');
}
imgElement.src = imgElement.src.replace('grey', 'red');
prevImage = imgElement;
}
</script>
I'm struggling with a very simple problem that I can't solve.
I'm using Framework7 (JS Framework for mobile application) and I have two list in my page:
First list:
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link"></a>
</li>
<li>
<a id="iOS" class="link external" target="_blank" href="ios_link"></a>
</li>
<li>
<a id="windows" class="link external" target="_blank" href="windows_link"></a>
</li>
</ul>
Second list:
<ul>
<li>
<a href="fb_link" target="_blank" class="item-link item-content link external" id="facebook">
<div class="item-media">
<i class="f7-icons">logo_facebook</i>
</div>
<div class="item-inner">
<div class="item-title">Facebook</div>
</div>
</a>
</li>
<li>
<a href=instagram_link" target="_blank" class="item-link item-content link external" id="instagram">
<div class="item-media">
<i class="f7-icons">logo_instagram</i>
</div>
<div class="item-inner">
<div class="item-title">Instagram</div>
</div>
</a>
</li>
</ul>
So, I need to take the href attribute on click event. I wrote this:
Dom7('.link.external').on('click', (event) => {
// First try
href = event.target.getAttribute('href')
console.log(href)
// Second trye
console.log(event.srcElement.href)
// Third try
var href = Dom7('a.link.external').attr('href');
var id = Dom7('a.link.external').attr('id');
console.log(href)
console.log(id)
})
I've tried three different solutions, but none of them work.
The first one and second one works only for the first list, I think because the <a> tag doesn't contains html inside.
The third one always return me the href and id of the first elements of the first list (android), even if I click in the second list.
Can you help me to solve this problem?
Solution 1
<ul>
<li>
<a id="android" class="link external" target="_blank" href="android_link" onclick="linkClicked(this); return false;"></a>
</li>
</ul>
<script>
function linkClicked(object) {
consile.log(object.getAttribute("href"));
return false;
}
</script>
Solution 2
var elements = document.getElementsByClassName('link');
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', linkClicked, false);
}
function linkClicked() {
console.log(this.getAttribute("href"));
};
if you can use jquery, use this working code :
$('.link.external').on('click', (event) => {
href = event.target.getAttribute('href');
alert(href);
});
jsfiddle
I have a menu that in each li, it will have multiple <a> tags. The main one being the name of the item. When that one is clicked, I want a Dropdown event to happen. But on the items within the <li> I want those clicks to function normally.
My HTML looks like this:
<li class="tree-item-name">Aunts & Uncles
<span class = "bootstrap-styles">
<ul>
<li>
<img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" />
Jackie Lynn <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
The JS looks like this:
jQuery(document).ready(function(){
jQuery('LI.tree-item-name').click(function(){
if (jQuery(this).hasClass('opened')) {
jQuery(this).find('UL').slideUp();
jQuery(this).removeClass('opened');
} else {
jQuery(this).find('UL').slideDown();
jQuery(this).addClass('opened');
}
return false;
});
});
But right now, when you click on either the img tag or Jackie Lynn....neither work - because both are being hijacked by the JS.
How do I set this up so only li.tree-item-name is affected?
You need to stop event propagation and target only lis which has a ul inside it
jQuery(function($) {
$('LI.tree-item-name').has('ul').click(function() {
if ($(this).hasClass('opened')) {
$(this).find('UL').slideUp();
$(this).removeClass('opened');
} else {
$(this).find('UL').slideDown();
$(this).addClass('opened');
}
return false;
});
$('LI.tree-item-name li').click(function(e) {
e.stopPropagation();
})
});
.tree-item-name ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li class="tree-item-name">
Aunts & Uncles
<span class="bootstrap-styles">
<ul>
<li>
<img alt="Default" class="img-circle" height="48" src="/assets/default.jpg" width="48" />
Jackie Lynn <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
</ul>
Give your a tag (Aunts & Uncles) a class, and use that class as the jQuery click event trigger.
jsFiddle Demo
<li class="tree-item-name"><a class="rels" href="#">Aunts & Uncles</a>
<span class = "bootstrap-styles">
<ul>
<li>
<img alt="Default" class="img-circle" height="48" src="http://placekitten.com/g/48/48" width="48" />
Jackie Lynn <a data-confirm="Are you sure?" data-method="delete" href="/family_trees/3" rel="nofollow"><i class="fa fa-thumbs-o-down"></i></a>
</li>
</ul>
</span>
</li>
jQuery('.rels').click(function(){
if (jQuery(this).parent().hasClass('opened')) {
jQuery(this).parent().find('UL').slideUp();
jQuery(this).parent().removeClass('opened');
} else {
jQuery(this).parent().find('UL').slideDown();
jQuery(this).parent().addClass('opened');
}
return false;
});
That's because you are using (this) which takes care of the link you click on but then select the entire unordered list.
You need to put the url's on separate list item for it to work the way you have it.
$(".fancybox").fancybox();
The HTML is this:
<img src="img/team/max.jpg" alt="max" class="kat"/>
<ul class="referenzen">
<li>
<a class="fancybox" data-title-id="title-1" href="img/logo.jpg">
<img src="img/logo.jpg" alt=""/>
</a>
<a class="fancybox" data-title-id="title-2" href="img/logo.jpg">
<img src="img/logo.jpg" alt=""/>
</a>
</li>
</ul>
If i click the img class="kat" the fancybox should start with the a tag elements. And not with the class="kat" Element.
Can anybody help me?
I'm not sure if I understood what you're asking for, but how about something like this: Register an event handler for the first image and simulate a click on the first fancyboxed-image:
$('img.kat').click(function() {
$(this).next().find('.fancybox:first').click();
});
Lets say I have a list of links:
<a id="home" href="#"> home link </a><br/>
<a id="list1" href="#"> some text1 </a><br/>
<a id="list2" href="#"> some text2 </a><br/>
<a id="list3"> href="#"> some text3 </a><br/>
<a id="list4" href="#"> some text4 </a><br/
<a id="list5" href="#"> some text5 </a><br/>
<a id="list sails" href="#"> sails link </a><br/>
and if some list link is clicked I get an alert with its text.
I wrote a script but it isn't right, it looks like this:
function lunch(){
alert( $(this).text()) }
for
<a id="listn" href="#" onclick="lunch()"> some text5 </a><br/>
How to do this in jQuery or just JavaScript?
$('a[id^=list]').click(function () {
alert($(this).text());
});
This will work for all links that has an id starting with 'list'. if you want it to work for all links change the selector to $('a').
You should pass the node instance into the lunch function.
< a id="listn" href="#" onclick="lunch(this)"> some text5 < /a>
And use this as argument
function lunch(node){ alert( $(node).text()) }
Do this:
<div id="links">
<a id="home" href="#">home link</a>
<a id="list1" class="list" href="#">some text1</a>
<a id="list2" class="list" href="#">some text2</a>
<a id="list3" class="list" href="#">some text3</a>
<a id="list4" class="list" href="#">some text4</a>
<a id="list5" class="list" href="#">some text5</a>
</div>
with:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#links a").click(function() {
alert(this.id);
return false;
});
});
</script>
or to restrict it to just the list ilinks:
$("a.list").click(function() {
alert(this.id);
return false;
});
You'll note that I put a class in there instead of using an attribute selector, which generally isn't advised. Also, by the principles of Unobtrusive JavaScript you should add your event handlers this way rather than using onclick attributes.
The best thing to do would be to give each one a class, e.g `
$(function()
{
$('.lunchable').click(function()
{
alert($(this).text());
});
});