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我隐藏/显示他们点击按钮2

示例：

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的id现在是这个按钮，隐藏这个div，然后回到prev ...

通过示例问题：

点击半径，点击下一个（dalej）的主div。现在一个div显示名为divsecond（例如），点击“cofnij”按钮，这个div改变比例隐藏。

问题是显示的div超过200 ... 所以我需要自动获取当前div id的脚本，隐藏此div，从第一个div中解锁按钮

Answer 1

这是一个解决方案，在按钮和div上都没有id，它们仍然“知道”每个按钮属于哪个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>

显示/隐藏div（返回上一页）

1 个答案: