#javascript #jquery #transform
#javascript #jquery #преобразование
Вопрос:
У меня есть этот скрипт, созданный с помощью jQuery, который я использую для отображения / скрытия divs на моей странице. Мне действительно нужно, чтобы это было сделано исключительно на JavaScript, и я понятия не имею, как это сделать. Кто-нибудь может мне помочь??? Я думаю, мне нужен конвертер или что-то в этом роде . . .
$("#optiuni").children().click(function(){
$("#" $(this).attr('name')).show().siblings().hide();
/*Gives the link-activ class to the link that i clicked an link-inactive to all others*/
$(this).attr('class','link-activ').siblings().attr('class','link-neactiv');
});
/*this makes shure that the first option from my list is active incarcarea paginii*/
$("#optiuni li.prima").children().click();
Пример разметки:
<div id="lista">
<ul id="optiuni">
<li id="titlu-lista-p"> <p class="listname-t">Past Events </p></li>
<li name="opt-1" class="prima"><a href="#"><p class="listdata">28.02.2011</p><p class="listname">TABU Oscar Party</p> </a></li>
<li name="opt-2" ><a href="#"><p class="listdata">24.03.2011</p><p class="listname">Cheese amp; Wine</p></a></li>
<li name="opt-8"><a href="#"><p class="listdata">08.04.2011</p><p class="listname">George Baicea</p></a></li>
</ul>
</div>
<div class="centru">
<div id="continut" >
<div id="opt-2" class="galerie" style="background-color: black;">
<iframe id="gal" src="cheese/index.html"></iframe>
</div>
<div id="opt-1" class="galerie" style="background-color: black;">
<iframe src="tabu/index.html"></iframe>
</div>
<div id="opt-8" class="galerie" style="background-color: blue;">
<iframe src="no-ev/index.html"></iframe>
</div>
</div>
</div>
Комментарии:
1. вам нужна Java или Javascript? это две разные вещи =)
2. jquery — ЭТО javascript, так в чем проблема?
3. Почему вы не можете использовать jQuery? Это экономит вам массу работы…
4. Можете ли вы хотя бы приложить некоторые усилия и попробовать сами. Рады исправлять ошибки, но мы не бесплатный сервис кодирования! Вы ничему не научитесь, копируя и вставляя решение.
5. Ну, вы должны подумать о том, что делают функции, и подумать о соответствующем решении с «чистым» JavaScript. Например.
element.style.display = 'none'
дляhide()
. Или взгляните на исходный код этих функций в jQuery.
Ответ №1:
Вот пример того, как вы могли бы сделать это на основе разметки, на которую вы ссылались в своем комментарии, поскольку есть некоторые предположения, которые вы могли бы сделать на основе версии jQuery, которые не выполняются, когда вы видите разметку.
// IE sucks
function addEvent(el, name, handler) {
if (el.addEventListener) {
el.addEventListener(name, handler, false);
} else if (el.attachEvent) {
// Make sure "this" references the element we're adding the event handler to
el.attachEvent('on' name, function() { handler.call(el, window.event); });
}
}
function eachElementSibling(el, func) {
var childNodes = el.parentNode.childNodes;
for (var i = 0, sibling; sibling = childNodes[i]; i ) {
if (sibling.nodeType !== 1 || sibling === el) {
continue;
}
func(sibling);
}
}
function activateLink() {
var elToShow = document.getElementById(this.getAttribute('name'));
elToShow.style.display = '';
eachElementSibling(elToShow, function(s) { s.style.display = 'none'; });
this.className = 'link-active';
eachElementSibling(this, function(s) {
if (s.getAttribute('name')) { s.className = 'link-neactiv'; }
});
}
var items = document.getElementById('optiuni').getElementsByTagName('li');
var initialItem = null;
for (var i = 0, item; item = items[i]; i ) {
// Need to filter, as non-link items are also present in the list
if (item.getAttribute('name')) {
addEvent(item, 'click', activateLink);
if (item.className === 'prima') {
initialItem= item;
}
}
}
if (initialItem) {
activateLink.call(initialItem)
}
Комментарии:
1. Очень хороший ответ, я не тестировал, но это должно привести к появлению операции. И тем, кто спрашивает «почему нет jQuery», подумайте о причинах, по которым лучше загружать это, а не библиотеку 75k, 100k просмотров страниц в день или любое количество других подобных ситуаций.
2. спасибо большое, я попробую это прямо сейчас, и если у меня возникнут какие-либо проблемы, я свяжусь с вами снова
3. я протестировал его, и он на самом деле ничего не делает, не могу понять, почему я буду просматривать ниже весь исходный код страницы
4. Я знаю, что может быть необходимо исключить как можно больше файлов, но это звучит как домашнее задание…