开发者

Javascript toggle function

开发者 https://www.devze.com 2023-04-10 13:09 出处:网络
I am currently using the following code on a website to allow some div\'s to be populated with content via ajax when a li开发者_如何转开发nk is clicked, as well as hidden again if clicked a second tim

I am currently using the following code on a website to allow some div's to be populated with content via ajax when a li开发者_如何转开发nk is clicked, as well as hidden again if clicked a second time.

The javascript function that does this is (stripped of irrelevant code):

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.
    }
}

This currently works fine, as when each link is clicked the corresponding DIV fills with content, and when clicked again the content disappears. However, I can open as many of these div's as I want at the same time. I want it to work so that when a new div is populated the rest are emptied.

All of the div's have an ID like this: id="div#" where the # is replaced with a unique ID number.

So I need to do something like this:

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 ...
}

I hope this makes sense.


document.getElementsByTagName('div') is an array (a node list, actually) of all divs.

You can check their IDs with .id.

Try this:

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' checks if the div's id is divSomething.

divs[i].id != ('div' + ID) makes an exception for divID.


Maybe you could give each div the same name (because names, unlike Ids, do not have to be unique) then use document.getElementsByName to find & clear them prior to populating the current div.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号