Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Nancy Melucci
Courses Plus Student 35,157 PointsjQuery make function fire only for specific class.
Beginning to have the feeling of going to the well more often then I should. But this is a big help to me.
The task is: I have code for two links to pop up windows, and a javascript function that makes the pop up window appear. I have to modify this so that the popup will only fire for one of the two links by class. So my questions:
1) Do I add the class designation to the link or the p element (since each link is enclosed in its own "p". 2) This seems like a class selector in jquery would work. I added a test with some additional text in a third "p" and a mouseover function that worked. I am not having similar success with adapting it for a click event.
Am I on the right track?
Thanks.
Nancy M.
6 Answers
Steven Parker
229,657 PointsThings look a bit different now.
First off, it doesn't look like you are actually using jQuery. Next, yes an element can have both and id and a class, but two elements can not have the same id. All id's on the page must be unique.
Now my original suggestion was to attach the handler only to the element you wanted it to work on (and my examples all used jQuery). But, if you want to keep your loop and attach the handler to all links, you can still test inside the handler to operate only on the right one. So you could add this to the createPopup function, right after target is assigned:
e.preventDefault();
if (!target.parentElement.classList.contains("p2")) return;
This way, only the link that is inside the paragraph with the class p2 will get processed, the others will be ignored.
And remember to change at least one of those duplicate id's. You can also remove them entirely if you don't need them elsewhere.
Steven Parker
229,657 PointsIt sounds good so far.
Whether you add the class to the paragraph (p) or the anchor (a) will be based on which one the event handler is associated with. I'll assume for the moment it's the paragraph, since you spoke of them more. So if you currently set up the handler like this:
$("p").click( ...
Then you could limit the event to only a paragraph with a specific class like this:
$("p.specificClass").click( ...
And if the class is not used anywhere else, you could select only the class, as you mentioned:
$(".specificClass").click( ...
For a more complete and accurate analysis, always post your actual code. And if you're working with a course here, also post a link the the course page.
Nancy Melucci
Courses Plus Student 35,157 PointsI wanted to acknowledge this. My teaching schedule isn't permitting me to work on this until tomorrow. I appreciate the answer and I will post about my progress soon.
Nancy Melucci
Courses Plus Student 35,157 PointsOK, well, I am not doing so good with this. I was able to make some other cool things happen on the page, but not the selective firing of the pop up. I am trying to make the pop up fire for only the link marked "A" to fire. The event handler is added dynamically by the for loop and then I have to make only the "A" fire even though the click event has been added to both links. I need to do it by class, but I am unsure what to do with the fact that both links have an id of link. Can an element have both an id and a class?
<
Here is the the html, the js and the css in case that helps. the popups have their own code I can supply if it's needed.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Nancy Melucci Popup Windows</title>
<link rel="stylesheet" type="text/css" href="css/atheme.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="p3">HELLO WORLD!</p>
<!-- Script 9.4 - popups.html -->
<p class="p2"><a href="popupA.html" id="link" target="PopUp">A Link</a> (Will open in a new window.)</p>
<p class="p1"><a href="popupB.html" id="link" target="PopUp">B Link</a> (Will open in a new window.)</p>
<script src="js/popups.js"></script>
</body>
</html>
// Script 9.5- popups.js
// This script creates a popup window on every link.
// Function called when the link is clicked.
function createPopup(e) {
'use strict';
// Get the event object:
if (typeof e == 'undefined') var e = window.event;
// Get the event target:
var target = e.target || e.srcElement;
// Create the window:
//var popup = window.open.getElementsByClassName("apop", target.href, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');
var popup = window.open(target.href, 'PopUp', 'height=100,width=100,top=100,left=100,location=no,resizable=yes,scrollbars=yes');
// Give the window focus if it's open:
if ( (popup !== null) && !popup.closed) {
popup.focus();
return false; // Prevent the default behavior.
} else { // Allow the default behavior.
return true;
}
} // End of createPopup() function.
// Establish functionality on window load:
//
window.onload = function() {
'use strict';
// Add the click handler to each link:
// Add the click handler to each link:
for (var i = 0, count = document.links.length; i < count; i++) {
document.links[i].onclick = createPopup;
} // End of for loop.
}; // End of onload function
```css
body {
background-color: background: #b4e391; /* Old browsers */
background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 );
color: #1b1d26;
}
p {
margin: auto;
padding-top: 200px;
text-align: center;
line-height: 2em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
}
Nancy Melucci
Courses Plus Student 35,157 PointsThe two ids came with the code for the assignment. I will fix that. Thanks for the continued guidance, I'll keep you posted.
Steven Parker
229,657 PointsNone of this code appears to use jQuery (though I did use it in my first examples because you had mentioned it in the question). Did you need it otherwise?
And you might point out to the instructor that the code being provided has an error since id's must be unique.
Nancy Melucci
Courses Plus Student 35,157 PointsThank you so much. That worked. NJM