Adding a class while looping to an array

Question

I have a list composed by some divs, all of them have a info link with the class .lnkInfo. When clicked it should trigger a function that adds the class show to another div (like some sort of PopUp) so it is visible and when clicked again it should hide it.

I am quite certain this must be a very basic thing and most likely I will get some scoffs...but hey! Once I have this down that's one thing less I will ever have to ask again. Anyway I am starting to leave the safety of html and css to start learning JS, PHP and the like and I came to a bit of a problem.

When testing it before it was working, that was until I added another div, it only worked with the first one, reading a bit and with some suggestion I realized it must be something related to a array, the problem is that I am not quite certain of the syntax for accomplishing what I am visualizing.

Any help would be deeply appreciated.

This is my JS code and below I will attack a Fiddle of how the html looks just in case.

var infoLab = document.getElementsByClassName('lnkInfo'),
closeInfo = document.getElementById('btnCerrar'); 

infoLab.addEventListener('click', function () {

    for (var i = 0 ; i < infoLab.length; i++) {
        var links = infoLab[i];

        displayPopUp('popUpCorrecto1', 'infoLab[i]');
    };
});

function displayPopUp(pIdDiv, infoLab[i]){
var display = document.getElementById(pIdDiv),

for (var i = 0 ; i < infoLab.length; i++) {
    infoLab[i]

 newClass ='';
 newClass = display.className.replace('hide','');
 display.className = newClass + ' show';
  };
}

JSFiddle.

Thanks a lot in advance and sorry for any facepalms!

EDIT:

This a jQuery function (in another file) that I need to call using the link because it fetches the data that will be inside the div, thus why I wanted to just add a hide/show.

$(".lnkInfo").click(function() {
  var id = $('#txtId').val();

  var request = $.ajax({
    url: "includes/functionsLabs.php",
    type: "post",
    data: {

    'call': 'displayInfoLabs',
    'pId':id},

    dataType: 'html',

 success: function(response){
    $('#info').html(response);


     }
  });
});

EDIT 2:

To a future reader of this question,

If you managed to find this answer throughout space and time, know that this is how the solution ended being, may it help you in your quest to stop being a noob.

SOLUTION

Jackson Ray Hamilton · Accepted Answer · 2014-04-16 01:09:58Z

1

Here is a rudimentary working example of how to make a popup appear after clicking on a specific element given your current code. Note that I added an id to your link element.

// Select the element.
var infoLink1 = document.getElementById('infoLink1'); 

// Add an event listener to that element.
infoLink1.addEventListener('click', function () {
    displayPopUp('popUpCorrecto1');
});

// Display a the popup by removing it's default "hide"
// class and adding a "show" class.
function displayPopUp(pIdDiv) {
    var display = document.getElementById(pIdDiv);
    var newClass = display.className.replace('hide', '');
    display.className = newClass + ' show';
}

Fiddle.

There are various ways to generalize this to work for all links/popups. You could add a data-link-number=1, data-link-number=2, etc to each link element (more on data-). Select an element containing all of your links. Bind to that element an event listener that, when clicked, detects the link element that was clicked (see event delegation / "bubbling"). You can determine which link was clicked based on the value of your data-link-number attribute. Then show the appropriate popup.

You may also want to use jQuery for this. Changing an element's class by setting it's className property makes for brittle DOM code. There is an addClass and a removeClass method available. jQuery's events also work cross-browser; element.addEventListener() will not work in IE8 which still has a significant market share.

edited Apr 16, 2014 at 1:09

answered Apr 16, 2014 at 0:56

Jackson Ray Hamilton

9,5766 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Code Grasshopper Over a year ago

Thank you so much for your reply! I am definitely going to bookmark those references. The only problem is that the box element div is generated by PHP, and I needed a "static" class or id so I could call a jQuery function that uses lnkLink.

Code Grasshopper Over a year ago

wow the delegation method surely looks powerful and very useful tool if mastered, thanks for that one I think this could be close to what I need.

Jackson Ray Hamilton Over a year ago

Your jQuery function as-is needs to be modified. You need to detect which link was clicked. You seem to have attempted this with var id = $('#txtId').val();, however note that you have 2 elements with the id "txtId". When you use jQuery to try to select the element it cannot determine which one you want. You need to distinguish the <input> elements; or, better yet, use data- attributes on the links instead of generating dummy <inputs>.

Jackson Ray Hamilton Over a year ago

^ This would not use delegation, but it would probably work just as well.

Code Grasshopper Over a year ago

thanks a lot! I was able to make the popUp appear from any link when I noticed that it was only fetching the data from the first div, when I read your comment it told me what I feared. I will probably have to re-read the data article because it went a bit over my head. Do you think that I could use the chat inside this site to ask you a little question about my jQuery?

|

Collectives™ on Stack Overflow

Adding a class while looping to an array

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related