преобразование jquery в java script

#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, которые не выполняются, когда вы видите разметку.

jsFiddle с живым примером.

 // 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. Я знаю, что может быть необходимо исключить как можно больше файлов, но это звучит как домашнее задание…