показать/скрыть DIV (обратно пред)

Question

У меня есть три DIV:

<div class="col-xs-6" id="divname1" style="display: none;"> 

     <button type="button" class="btn btn-primary btn-sm" id="button2" onclick="RadioCheck()">Dalej</button> 
     <button type="button" class="btn btn-primary btn-sm" id="button" onclick="BackFunction()">Cofnij</button> 

     </form>   
    </div> 


    <div class="col-xs-6" id="divname2" style="display: none;"> 

     <button type="button" class="btn btn-primary btn-sm" id="button2" onclick="RadioCheck()">Dalej</button> 
     <button type="button" class="btn btn-primary btn-sm" id="button" onclick="BackFunction()">Cofnij</button> 

     </form>   
    </div> 


    <div class="col-xs-6" id="divname3" style="display: none;"> 

     <button type="button" class="btn btn-primary btn-sm" id="button2" onclick="RadioCheck()">Dalej</button> 
     <button type="button" class="btn btn-primary btn-sm" id="button" onclick="BackFunction()">Cofnij</button> 

     </form>   
    </div> 

с помощью JS я скрыть/показать их щелкая по button2

пример:

if (x = divchecked) 
{ 
    document.getElementById('somediv').style.display = 'block' ; 

    var ele = document.getElementById("buttonfromdiv"); 
    ele.setAttribute("disabled", "disabled"); 

} 

    if (x = chec.checked) 
    { 
     document.getElementById('divsome2').style.display = 'block' ; 

     var ele = document.getElementById("buttonchecked"); 
     ele.setAttribute("disabled", "disabled"); 
    } 

имя с помощью есть только пример, и я думаю, что не работает, чтобы запустить его из этого кода (в моем коде все еще работает, но его здесь не нужно).

Мне нужно написать сценарий: когда я нажимаю на кнопку «cofnij», я получить идентификатор DIV, где находится эта кнопка теперь скрыть DIV и обратно пред ...

Проблема с помощью примера :

У нас есть главный div, где мы нажимаем некоторый радиус и нажимаем далее (dalej). Теперь один div показывает имя divsecond (напр.), Мы нажимаем кнопку «cofnij», и этот div меняет пропорцию, чтобы скрыть.

Проблема заключается в DIV, который показывает это более 200 ... Поэтому мне нужно скрипт, который автоматически получить текущий Див идентификатор, скрыть DIV, разблокировать кнопки с первого DIV

Answer 1

Вот решение , не используя идентификаторы по обе кнопки, ни в DIV, они до сих пор «знают», к которому Див каждой кнопки принадлежат

var checkbuttons = document.querySelectorAll('[data-check]'); 
 
var backbuttons = document.querySelectorAll('[data-back]'); 
 

 
for (var i = 0; i < backbuttons.length; i++) { 
 
    
 
    checkbuttons[i].addEventListener('click', function(e){ 
 
    if (e.target.parentElement.style.backgroundColor == 'red') { 
 
     e.target.parentElement.style.backgroundColor = ''; 
 
    } else { 
 
     e.target.parentElement.style.backgroundColor = 'red' 
 
    } 
 
    }); 
 

 
    backbuttons[i].addEventListener('click', function(e){  
 
    if (e.target.parentElement.style.backgroundColor == 'red') { 
 
     e.target.parentElement.style.backgroundColor = 'lime'; 
 
    }  
 
    }); 
 
    
 
}

[data-displaynone] { 
 
    /* display: none; */ 
 
    padding: 10px; 
 
}

<div class="col-xs-6" data-displaynone> 
 

 
    <button type="button" class="btn btn-primary btn-sm" data-check>Dalej</button> 
 
    <button type="button" class="btn btn-primary btn-sm" data-back>Cofnij</button> 
 
</div> 
 

 

 
<div class="col-xs-6" data-displaynone> 
 

 
    <button type="button" class="btn btn-primary btn-sm" data-check>Dalej</button> 
 
    <button type="button" class="btn btn-primary btn-sm" data-back>Cofnij</button> 
 
</div> 
 

 

 
<div class="col-xs-6" data-displaynone> 
 

 
    <button type="button" class="btn btn-primary btn-sm" data-check>Dalej</button> 
 
    <button type="button" class="btn btn-primary btn-sm" data-back>Cofnij</button> 
 
</div>