использование getElementById для изменения фона нескольких идентификаторов DIV - PullRequest
Новая
       3

использование getElementById для изменения фона нескольких идентификаторов DIV

0 голосов
/ 19 июля 2011

потратив часы на эту проблему, мне нужно бросить ее в массы.У меня есть тестовая страница на http://sketch360test.co.uk/test.php, на которой я пытаюсь использовать события onclick для двух целей одновременно: 1) показать / скрыть различные результаты div (это работает), и 2)изменить фоновое изображение (ы) div'ов 'question'.Все «вопросительные» дивы по умолчанию имеют зеленое фоновое изображение (контролируемое CSS), черное изображение при наведении курсора ... и я пытаюсь заставить их иметь черное изображение по щелчку мыши, а также сбрасывать bgизображение для всех ДРУГИХ вопросов divs к зеленому при нажатии.Надеюсь, что это имеет смысл ... это должно быть более очевидно, если вы просматриваете страницу!

Мне удалось заставить это работать для одного экземпляра, то есть ... щелкнув либо Вопрос 1, Вопрос 2 или Вопрос3 превратит их в чёрный бг.Это было сделано с помощью встроенной функции onclick для вызова класса css, например: 

<div id="section-menu-1" onclick="this.className='className2';">Question 1</div>

Затем я добавил еще несколько javascript в контейнер для этого элемента (Вопрос 1), который управляет «сбросить».«или« вернуть »черную отметку Вопроса 3 в зеленую.Это было сделано с использованием следующего сценария: 

<script type="text/javascript">

function changeClass()
{
 var e = document.getElementById("section-menu-3");
 e.setAttribute('class', 'className1');
 e.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}
</script>

Обратите внимание, что здесь я пробовал МНОГИЕ сценарии для изменения класса моих DIV, это единственный, который работает последовательно.В этом и заключается проблема - я хочу изменить приведенный выше скрипт, чтобы он затрагивал все идентификаторы вопросов, а не только «section-menu-3».Кстати, в этой демонстрации есть только 3 вопроса, но у меня будет до 7 или 8 на последней странице, поэтому мне нужно изменить приведенный выше скрипт, чтобы иметь возможность принимать многочисленные идентификаторы.Я пробовал такие вещи, как getElementsByTag, но не смог заставить их работать (возможно, потому что я пытаюсь добавить класс к элементу, к которому я уже применил один для этого процесса).

Все остальное, что я пробовал, привело к нарушению функциональности вышеупомянутого мини-скрипта.

В основном, ПОМОГИТЕ![пожалуйста :))]

Ответы [ 4 ]

1 голос
/ 19 июля 2011

Оберните все ваши div в внешнем div с id, подобным так: 

<div id="section-menu-container">
    <div id="section-menu-1" onclick="this.className='className2';">Question 1</div>
    <div id="section-menu-2" onclick="this.className='className2';">Question 2</div>
    <div id="section-menu-3" onclick="this.className='className2';">Question 3</div>
</div>

Затем используйте вашу функцию javascript: 

function changeClass()
{
 var elems = document.getElementById("section-menu-container").getElementByTagName('div');
 elems.setAttribute('class', 'className1');
 elems.setAttribute('className', 'className1'); // for IE which does not recognize "class"
 return;
}
0 голосов
/ 19 июля 2011

Посмотрите на эту демонстрацию: скрипка

Это должно направить вас в правильном направлении.

0 голосов
/ 19 июля 2011

Как реализовать простой кросс-браузер getElementsByClassName функция 

function initializeGetElementsByClassName ()
{
  if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
      var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
      var allElements = document.getElementsByTagName("*");
      var results = [];
      var element;
      for (var i = 0; (element = allElements[i]) != null; i++) {
        var elementClass = element.className;
        if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
          results.push(element);
        }
        return results;
      }
    }
};

var currentWindowOnLoad = window.onload;

window.onload = function () {
    if (currentWindowOnLoad) {
        currentWindowOnLoad();
    }
    initializeGetElementsByClassName();
};

Теперь, используя это, вы можете просто сделать следующее:

HTML 

<div class="sectionMenu" id="id="section-menu-1" ></div>
<div class="sectionMenu" id="id="section-menu-2" ></div>
<div class="sectionMenu" id="id="section-menu-3" ></div>

Сценарий 

var sectionMenus = document.getElementsByClassName("sectionMenu");
for (var i = 0; i < sectionMenus.length; i++) {
  var currentClass = !sectionMenu[i].getAttribute("class") ? sectionMenu[i].getAttribute("classname") : sectionMenu[i].getAttribute("class");
  sectionMenu[i].setAttribute("class", currentclass + " classname1");
  sectionMenu[i].setAttribute("classname", currentclass + " classname1");
}
0 голосов
/ 19 июля 2011

По сути, вам нужен какой-то универсальный селектор, и, как полагает Пол выше, jquery - отличный инструмент.Затем вы можете добавить класс к своим вопросам, скажем «myclass».Затем с помощью jquery вы делаете:

$ ('. Myclass'). Attr ("class", "className1");

В качестве альтернативы вы можете сделать это с помощью javascript: document.getElementsByClassName ('myclass') вернет массив объектов DOM, и вам нужно выполнить итерации по каждому элементу.Однако getElementsByClassName может не поддерживаться в версиях IE до IE6 SP1.

...