Javascript Arrays and variable click functions

Question

So I have set up two javascript arrays to pull information from some php. One array gets the name of the category to be clicked on, while the other array stores the class and id tag for the category. The class and id tags are the same other than there css type, but the array needs to output them into document elements and then, when clicked, affect the relevant areas of the document. I also need to remove duplicates from the arrays, which doesn't seem to work under my current code:

<script type="text/javascript">
var BookSeries = [];
var BookClass = [];
var i=0;
</script>

then variables for the array are pulled from php and output this way:

<script type="text/javascript">
var uniqueSeries = BookSeries.filter(function(elem, pos) {
return BookSeries.indexOf(elem) == pos;
});

var uniqueClass = BookClass.filter(function(elem, pos) {
return BookClass.indexOf(elem) == pos;
});

while (uniqueSeries[i]) {
document.write( "<span id='"+uniqueClass[i]+"'>"+uniqueSeries[i]+"</span>" );
i++;
}

for(var i = 0; i < uniqueClass.length; i++) {
$np("#"+uniqueClass[i]).click(function(){
$np(".postitem").fadeOut(200);
$np("."+uniqueClass[i]).fadeIn(200);
});
}
</script>

Refer to this [SO] thread on removing duplicates from arrays http://stackoverflow.com/a/9229932/2488939 — The Mahahaj, Mar 19 '14 at 23:25
I have tried other methods for removing duplicates - namely, this: var uniqueSeries = []; $np.each(BookSeries, function(i, el){ if($np.inArray(el, uniqueSeries) === -1) uniqueSeries.push(el); }); var uniqueClass = []; $np.each(BookClass, function(i, el){ if($np.inArray(el, uniqueClass) === -1) uniqueClass.push(el); }); but still no luck. Also, my major problem is that the click function doesn't iterate across the whole array. If I get it to work, it only works on the last one — user1476374, Mar 20 '14 at 00:49

The Mahahaj · Answer 1 · 2014-03-20T12:17:04.417

0

You are using jquery so you can do the following for appending the elements to the DOM:

    var htmlString = "";
    for (var i = 0; i < uniqueSeries.length; i++) {
        htmlString += "<span id='"+uniqueClass[i]+"'>"+uniqueSeries[i]+"</span>";
    }

    $("#myContainer").html(htmlString);

Not sure what is $np so I'll assume you meant jquery's $.

    for(var i = 0; i < uniqueClass.length; i++) {
        var uClass =  uniqueClass[i];
        $("#" + uClass).click(function(){
            $(".postitem").fadeOut(200);
            $("." + uClass).fadeIn(200);
        });
    }

Edit:

"#myContainer" refers to the id of the dom element you want to append the html to. if you just want to append it to document you can do:

    $(document).appendTo(htmlString);

Also see I updated the code above to reflect your comments about the uniqueClass array.

edited Mar 20 '14 at 12:17

answered Mar 20 '14 at 01:13

The Mahahaj

696
6
8

Thanks! But I don't understand the #mycontainer usage ... also i am using an id on an external click item to manipulate all divs identified by a class with the same name, so i cannot use 'this', since the item being clicked is not the same item that is being hidden – user1476374 Mar 20 '14 at 02:05
The id, uniqueClass, when clicked, causes all items with the class postitem to fadeOut, these items also are labeled with the class 'uniqueClass' which allows them to reappear. – user1476374 Mar 20 '14 at 02:11
for further info - uniqueClass is a variable which is defined by php and changes according to what category the div item is related to – user1476374 Mar 20 '14 at 02:23

Javascript Arrays and variable click functions

1 Answers1