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

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

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

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

Затем я добавил еще несколько javascript в контейнер для этого элемента (Вопрос 1), который позволяет «сбросить» или «вернуть» черный bg Вопроса 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, но не смог заставить их работать (возможно, потому, что я пытаюсь добавить класс к элементу, к которому я уже применил его для этого процесса).

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

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


javascript html getelementbyid
person sketch360    schedule 19.07.2011    source источник
comment
Пробовали jQuery? Это позаботится о легком выборе по классу (и будет работать и для IE).   -  person Paul    schedule 19.07.2011
comment
(быстрая и грязная демонстрация здесь jsfiddle.net/aSPZd)   -  person Paul    schedule 19.07.2011

Ответы (4)


arrow_upward
0
arrow_downward

Взгляните на эту демонстрацию: fiddle

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

person Paul    schedule 19.07.2011
comment
Привет Пол, большое спасибо за это; можно ли немного изменить эту скрипку, чтобы получить следующее? Я пробовал, но не могу заставить его двигаться: (1) чтобы Div #1 отображался при загрузке страницы, 2) когда вы вводите внутреннюю ссылку (т.е. ‹a href› ВНУТРИ Div #3, ссылаясь на Div #2 ), чтобы эта внутренняя ссылка также повлияла на изменение фонового изображения. Я могу получить внутреннюю ссылку для изменения div, но это не помогает с изображением bg :( - person sketch360; 19.07.2011
comment
@Paul.. я воспроизвел скрипку здесь: ‹sketch360test.co.uk/test2.php› и включил ссылку в Div #3 на Div #2, но я по-прежнему не могу одновременно повлиять на изменение фонового изображения. - person sketch360; 19.07.2011
comment
успешно заставили Div # 1 отображаться при загрузке страницы, просто добавив дополнительный стиль display: block к этому div, возгласы, возгласы :), но этот обмен изображениями, запущенный бизнесом внутренних ссылок, выходит за рамки моего диапазона :( ://www.sketch360test.co.uk/test2.php" rel="nofollow noreferrer">ссылка - person sketch360; 19.07.2011
comment
Попробуйте это: jsfiddle.net/aSPZd/6 (примечание: есть много способов справиться с этим , а это я просто быстро выписал - может и не самое эффективное, но с тем, что есть, работает) - person Paul; 19.07.2011
comment
я обнаружил странную проблему со скриптом [ссылка](jsfiddle.net/aSPZd/6); когда я пытаюсь заменить внутреннюю ссылку на внешнюю, например. когда один из блоков контента имеет ссылку на внешний сайт, он не будет работать, даже если я удалю класс .question из ссылки - есть идеи? - person sketch360; 25.07.2011

arrow_upward
1
arrow_downward

Оберните все свои div во внешний div с таким идентификатором:

<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;
}
person Paul    schedule 19.07.2011

arrow_upward
0
arrow_downward

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

$('.myclass').attr("class", "className1");

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

person Candide    schedule 19.07.2011

arrow_upward
0
arrow_downward

Как реализовать простую кросс-браузерную 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");
}
person John Hartsock    schedule 19.07.2011
comment
document.getElementsByTagName(*); довольно медленно. Я не думаю, что ему необходимо иметь здесь селектор класса. - person Paul; 19.07.2011
comment
@PaulPRO ... Как вы думаете, как jQuery справляется с этим. Например, следующий селектор $(.classname). jQuery сначала использует getElementsByTagName(*) для ограничения результатов и поиска определенного класса во всех элементах DOM. Нет, очевидно, было бы более эффективно разместить $(div.classname) и указать тег, но приведенную выше функцию можно изменить, чтобы справиться с этой эффективностью. - person John Hartsock; 19.07.2011
comment
Да, я знаю. Какова твоя точка зрения? Здесь ему тоже не нужен jQuery. - person Paul; 19.07.2011
comment
@PaulPro Я хочу сказать, что мне просто предоставили надежный и многоразовый ответ на его вопрос. Эту функцию можно повторно использовать и использовать для дополнительных целей. - person John Hartsock; 19.07.2011
comment
Хорошо, я дам вам, что t можно использовать повторно. Я сделал свою собственную версию того же самого, только без регулярного выражения, когда мне это нужно, но я не думаю, что селектор className — это то, что ему здесь нужно, особенно когда он перезаписывает атрибут класса в функции, что означает, что если он установил для них определенный класс, и функция работала только один раз без дополнительных модификаций. - person Paul; 19.07.2011
comment
@PaulPro .. В своем ответе я только что объяснил, как сделать эту простую модификацию, чтобы она работала более одного раза. - person John Hartsock; 19.07.2011