Функция переключения Javascript

Question

В настоящее время я использую следующий код на веб-сайте, чтобы позволить некоторым элементам div заполняться контентом через ajax при нажатии на ссылку, а также снова скрываться при повторном нажатии.

Функция javascript, которая делает это (лишена ненужного кода):

function showNews(id){
    if(CONDITION){
        ajax(); //Not actual code, original code just grabs content via ajax and puts it into an existing empty div using innerHTML.
    }
    else if (CONDITION) {
        document.getElementById('div'+id).innerHTML = ''; // Empties div again, in effect hiding it from view.
    }
}

В настоящее время это работает нормально, так как при нажатии на каждую ссылку соответствующий DIV заполняется содержимым, а при повторном нажатии содержимое исчезает. Тем не менее, я могу открыть столько разделов, сколько захочу одновременно. Я хочу, чтобы это работало так, чтобы при заполнении нового div остальные очищались.

У всех элементов div такой идентификатор: id = "div #", где символ # заменяется уникальным номером идентификатора.

Так что мне нужно сделать что-то вроде этого:

function showNews(id){
    if(CONDITION){
        ajax(); //Not actual code, original code just grabs content via ajax and puts it into an existing empty div using innerHTML.
**FOR ALL DIVS THAT HAVE AN ID THAT STARTS WITH 'div', BUT DOES NOT MATCH CURRENT ID VARIABLE, SET innerHTML = ''**
    }
    ... code removed from original ...
}

Надеюсь, это имеет смысл.

Answer 1

document.getElementsByTagName('div') - это массив (на самом деле список узлов) всех элементов div.

Вы можете проверить их идентификаторы с помощью .id.

Попробуйте это:

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
    if( (divs[i].id.substr(0,3) == 'div') && (divs[i].id != ('div' + ID)) )
        divs[i].innerHTML = '';

divs[i].id.substr(0,3) == 'div' проверяет, является ли div id divSomething.

divs[i].id != ('div' + ID) делает исключение для divID.

Answer 2

Возможно, вы могли бы дать каждому div одинаковое имя (потому что имена, в отличие от идентификаторов, не обязательно должны быть уникальными), затем использовать document.getElementsByName, чтобы найти и очистить их перед заполнением текущего div.