Javascript заменить DIV на каждый клик

Question

следующие работы по замене DIV с новым DIV ...

<div id = "div1" style="display:block" onclick = "replace()"><img src="1.jpg" /></div> 

<div id = "div2" style="display:none"><img src="2.jpg" /></div> 

<script type = "text/javascript"> 
function replace() { 
document.getElementById("div1").style.display="none"; 
document.getElementById("div2").style.display="block"; 
} 

</script> 

То, что я не могу понять, как сделать эту работу таким образом, когда вы нажимаете div2 его заменены на div3 и так далее.

Другими словами, я хочу заменить div на каждый клик больше, чем один раз. Каков наилучший способ сделать это? Я новичок, поэтому не уверен, что выше это хорошее начало или нет.

Спасибо!

Answer 1

Вы могли бы сделать более общую функцию:

function replace(hide, show) { 
    document.getElementById(hide).style.display="none"; 
    document.getElementById(show).style.display="block"; 
} 

Затем вы можете создать много дивы и использовать ту же функцию:

<div id = "div1" style="display:block" onclick = "replace('div1','div2')">...</div> 
<div id = "div2" style="display:none" onclick = "replace('div2','div3')">..</div> 
<div id = "div3" style="display:none" onclick = "replace('div3','div4')">..</div> 
... 

Answer 2

Я предлагаю вам некоторые лучшие практики в этом ответе:

• Используйте классы вместо свойства стиля, это лучше для браузера.
• Не используйте встроенный обработчик событий. См. Пример ниже.
• Это не «замена», которую вы ищете, это «переключение».
• Предлагаю вам использовать пузырьки событий. Таким образом, вы добавляете одно единственное событие в контейнер вашего div, и вы можете работать над этим.

Хорошо, теперь для примера:

HTML:

<div id="container"> 
    <div id="div1">..</div> 
    <div id="div2" class="hidden">..</div> 
    <div id="div3" class="hidden">..</div> 
</div> 

JS:

// Notice how I declare an onclick event in the javascript code 
document.getElementById('container').onclick = function(e) { 

    // First, get the clicked element 
    // We have to add these lines because IE is bad. 
    // If you don't work with legacy browsers, the following is enough: 
    //  var target = e.target; 
    var evt = e || window.event, 
     target = evt.target || evt.srcElement; 

    // Then, check if the target is what we want clicked 
    // For example, we don't want to bother about inner tags 
    // of the "div1, div2" etc. 
    if (target.id.substr(0, 3) === 'div') { 

     // Hide the clicked element 
     target.className = 'hidden'; 

     // Now you have two ways to do what you want: 
     //  - Either you don't care about browser compatibility and you use 
     //  nextElementSibling to show the next element 
     //  - Or you care, so to work around this, you can "guess" the next 
     //  element's id, since it remains consistent 
     // Here are the two ways: 

     // First way 
     target.nextElementSibling.className = ''; 

     // Second way 
     // Strip off the number of the id (starting at index 3) 
     var nextElementId = 'div' + target.id.substr(3); 
     document.getElementById(nextElementId).className = ''; 
    } 
}; 

И конечно, CSS:

.hidden { 
    display: none; 
} 

Я настоятельно рекомендую вам прочитать комментарии в javascript-коде.

Если вы внимательно прочитали, вы увидите, что в современных браузерах код JS - это вопрос из 5 строк. Больше не надо. Для поддержки старых браузеров требуется 7 строк.