Поэтому я создал два массива javascript, чтобы извлекать информацию из некоторого php. Один массив получает имя категории, на которую нужно нажать, а другой массив хранит тег класса и идентификатора для категории. Теги class и id те же, что и тип css, но массив должен выводить их в элементы документа, а затем, при нажатии, влияет на соответствующие области документа. Мне также нужно удалить дубликаты из массивов, которые, похоже, не работают под моим текущим кодом:
<script type="text/javascript">
var BookSeries = [];
var BookClass = [];
var i=0;
</script>
то переменные для массива выводятся из php и выводятся следующим образом:
<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>
Вы используете jquery, чтобы вы могли сделать следующее для добавления элементов в DOM:
var htmlString = "";
for (var i = 0; i < uniqueSeries.length; i++) {
htmlString += "<span id='"+uniqueClass[i]+"'>"+uniqueSeries[i]+"</span>";
}
$("#myContainer").html(htmlString);
Не уверен, что такое $ np, поэтому я предполагаю, что вы имели в виду jquery $.
for(var i = 0; i < uniqueClass.length; i++) {
var uClass = uniqueClass[i];
$("#" + uClass).click(function(){
$(".postitem").fadeOut(200);
$("." + uClass).fadeIn(200);
});
}
Редактировать:
"#myContainer" относится к идентификатору элемента dom, к которому вы хотите добавить html. если вы просто хотите добавить его в документ, который вы можете сделать:
$(document).appendTo(htmlString);
Также см., Что я обновил код выше, чтобы отразить ваши комментарии о массиве uniqueClass.