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());
});
});
Related
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 div elements and if a div is clicked, I want to trigger a click event on the inner<a></a> tag. I need to do this, as there are validation functions on the click function of the anchor tags and they are not rendered by me.
This is my approach to do it:
$('.wrapperDiv').on('click', function(e) {
e.stopPropagation();
$(e.currentTarget).find('.link').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="wrapperDiv">
<a class="link" href="https://google.com/" target="_self">Test A</a>
</div>
</li>
<li>
<div class="wrapperDiv">
<a class="link" href="https://bing.com/" target="_blank">Test B</a>
</div>
</li>
</ul>
Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?
Try to add e.preventDefault(); after e.stopPropagation();
stopPropagation() only prevent to trigger parent element click, Just do it with div click:
$('.wrapperDiv').on('click', function(e) {
e.stopPropagation();
var link = $(e.currentTarget).find('.link')
var win = window.open(link.attr('href'), link.attr('target'));
win.focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="wrapperDiv">
<a class="link" href="https://google.com/" target="_self">Test A</a>
</div>
</li>
<li>
<div class="wrapperDiv">
<a class="link" href="https://bing.com/" target="_blank">Test B</a>
</div>
</li>
</ul>
I have in HTML
<div class="ktmsg">
<ul>
<li class="a1">
<a title="Link Tools" href="#"> … </a>
</li>
<li class="a2">
<a title="Link Tools" href="#"> … </a>
</li>
<li class="a3">
<a title="Link Tools" href="#"> … </a>
</li>
</ul>
</div>
What i want to do is to add after the second </li> an <ul>More</ul>
Final expected output should be
<div class="ktmsg">
<ul>
<li class="a1">
<a title="Link Tools" href="#"> … </a>
</li>
<li class="a2">
<a title="Link Tools" href="#"> … </a>
</li>
<ul> //Starting the sub-menu
More // The link that after i hover it will start showing the <li> starting from the third one
<li class="a3">
<a title="Link Tools" href="#"> … </a>
</li>
</ul>
</ul>
</div>
I am thinking that the javascript would look smth like this:
limenu = document.selectAll(.ktmsg)('<li>');
for(var i=1, i<2, i++)
remove.limenu
add.
.... And i am quite stuck, Please help, would be much appreciated.
Using jQuery
jQuery(function ($) {
var $lis = $('.ktmsg > ul > li');
var $a = $('<li>More</li>').insertAfter($lis.eq(1));
var $lefts = $lis.slice(2).hide();
$a.hover(function () {
clearTimeout($a.data('hoverTimer'));
$lefts.show();
}, function () {
var timer = setTimeout(function () {
$lefts.hide();
}, 200);
$a.data('hoverTimer', timer);
});
$lefts.hover(function () {
clearTimeout($a.data('hoverTimer'));
}, function () {
var timer = setTimeout(function () {
$lefts.hide();
}, 200);
$a.data('hoverTimer', timer);
});
})
Demo: Fiddle
With jQuery to add this:
<ul>More</ul>
after second li you need:
$( 'li:eq(1)' ).after( '<ul>More</ul>' );
I've created a fiddle of how this could work using jQuery. Pretty simple really, you just hide the sub menu using CSS and then show/hide it as needed using jQuery when "More" is being hovered over. I've used fadeIn() and fadeOut() but you could just as easily use hide() and show() if you don't need the animations. I've restructured your HTML slightly so if you use my solution use my new HTML.
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') );
})
I have a function that remains pretty much constant except for the changing class names. I was hoping to make the code a little less text heavy. How may I go about making it just a small function instead of repeating it n times. My concern is also about removing the active class for the last li that was clicked. I've provided only 2 instances here, but this code is repeated n number of times.Any ideas would be much appreciated.
$('a.app1-preview').click(function() {
//remove last active classes
$(".app2").removeClass('active');
$(".app2-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-2').fadeOut("slow", function () {
$('.app-preview-1').fadeIn("slow");
});
});
$('a.app2-preview').click(function() {
//remove last active classes
$(".app1").removeClass('active');
$(".app1-preview").removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview-1').fadeOut("slow", function () {
$('.app-preview-2').fadeIn("slow");
});
});
HTML code:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>
Try to exploit the fact that you have .active class. ;) Preview - http://jsfiddle.net/evSqF/1/
js:
<script>
$('a.blocklink').click(function() {
var self = $(this);
$('.active').fadeOut('slow', function(){
$(this).removeClass('active');
self.fadeIn('slow');
self.addClass('active');
});
});
</script>
html:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink">
<span>ANOTHER<br /> APP</span>
</a>
<div class="app-preview active">App1 preview</div>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink">
<span>SECOND<br /> APP</span>
</a>
<div class="app-preview">App2 preview</div>
</li>
</ul>
</div>
Edit: After I got some caffeine, I noticed the problems with the setup. I've created a demo at JSFiddle. The markup will display a "header" for an app which will display the child description when clicked on, and hide the descriptions of other sibling's descriptions.
In this case, you can show the current element, and hide the siblings, which would be a cleaner solution as it scales as you at more app elements.
$(".app").click(function() {
var $self = $(this);
var $apps = $self.closest(".apps");
var $selfSiblings = $apps.children(".app").not($self);
$self.addClass(".active");
$self.find(".app-preview").addClass("active");
$selfSiblings.removeClass(".active");
$selfSiblings.find(".app-preview").removeClass("active").fadeOut("slow", function() {
$self.find(".app-preview").fadeIn("slow");
});
});
I would also recommend rewriting your HTML as such:
<div class="app-container">
<ul class="apps">
<li class="app">
App 1<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 1</span>
</a>
</li>
<li class="app">
App 2<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 2</span>
</a>
</li>
<li class="app">
App 3<br />
<a title href="#" class="app-preview blocklink">
<span>PREVIEW 3</span>
</a>
</li>
</div>
Write a function to make the functions for you:
function makeHandler(deactivate, fadeOut, fadeIn) {
return function() {
//remove last active classes
$(deactivate).removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$(fadeOut).fadeOut("slow", function () {
$(fadeIn).fadeIn("slow");
});
});
Then:
$('a.app1-preview').click(makeHandler('.app2, .app2-preview', '.app-preview-2', '.app-preview-1'));
$('a.app2-preview').click(makeHandler('.app1, .app1-preview', '.app-preview-1', '.app-preview-2'));
You could probably simplify things further by re-thinking the naming conventions you've got.
I would suggest to define a single function:
function single(index_main, index_aux) {
// Does all your magic
}
$('a.app1-preview').click(function() {
single("1", "2");
});
$('a.app2-preview').click(function() {
single("2", "1");
});
And that does the trick.
I made a jsfiddle example for you. Have a look at it here, it uses as much code that you wrote as possible, so nothing that should surprise you will be there :)
http://jsfiddle.net/2ZPxx/
Basically I ended up with this HTML:
<div class="app-container">
<ul class="apps">
<li class="app1">
<a title href="#" class="app1-preview blocklink" id="app1">
<span>ANOTHER<br /> APP</span>
</a>
</li>
<li class="app2">
<a title href="#" class="app2-preview blocklink" id="app2">
<span>SECOND<br /> APP</span>
</a>
</li>
</div>
<div class="app-preview-app1 app-preview">App1 preview</div>
<div class="app-preview-app2 app-preview">App2 preview</div>
And this javascript:
$('.apps li a').click(function() {
var id = $(this).attr('id');
$('.apps li').removeClass('active');
//Add active class for this
$(this).parent().addClass('active');
$(this).addClass('active');
$('.app-preview').fadeOut("slow", function () {
$('.app-preview-'+id).fadeIn("slow");
});
});