Question

人，

我的JS代码遇到了这个麻烦。我可以帮忙吗？

HTML代码

<div class="col-md-12">

<div > 

    <input class="form-check-input" id="label1" type="radio" name="tabs" data-tab="tab1" value="empresa" checked  autocomplete="off"/>

    <input class="form-check-input" id="label2" type="radio" name="tabs" data-tab="tab2" value="funcionario" checked  autocomplete="off" />

     <input class="form-check-input" id="label3" type="radio" name="tabs" data-tab="tab3" value="estudante" checked  autocomplete="off" />

</div>
<div>
    <div id="tab1" data-content="" style="display: none;">
         <p> 
            Escreva o ramo que estuda Endereço da escola onde estuda
        </p>
    </div>
    <div id="tab2" data-content="" style="display: none;">
        <p>
            Escreva o ramo que estuda Endereço da escola onde estuda
        </p>
    </div>
    <div id="tab3" data-content="" style="display: none;">
        <p>
            Escreva o ramo que estuda Endereço da escola onde estuda
        </p>
    </div>
</div>

JavaScript

//consultando os radio responsaveis por exibir os conteudos.
    var tabs = document.querySelectorAll("[data-tab]");

    //consultando os conteudos a serem exibidos.
    var contents = document.querySelectorAll("[data-content]");

    //declarando a função que será associada a cada input:radio
    var tabOnClick = function (elem) {  
      for (var indice in contents) {
        //verificando se o input:radio selecionado está associado ao conteudo atual.
        var display = contents[indice].id == elem.target.dataset.tab ? "block" : "none";
        contents[indice].style.display = display;
      }
    }

    //associando todos os input:radio ao método declarado acima.
    for (var indice in tabs) {
        tabs[indice].onclick = tabOnClick;
    }

给我这个错误 TypeError：contents [indice] .css未定义，无法访问其属性“显示” [了解更多]

Answer 1

您可以通过以下方式使用for...of来使用当前元素：

//consultando os radio responsaveis por exibir os conteudos.
var tabs = document.querySelectorAll("[data-tab]");

//consultando os conteudos a serem exibidos.
var contents = document.querySelectorAll("[data-content]");

//declarando a função que será associada a cada input:radio
var tabOnClick = function (elem) {  
  for (var indice of contents) {
    //verificando se o input:radio selecionado está associado ao conteudo atual.
    var display = indice.id == elem.target.dataset.tab ? "block" : "none";
    indice.style.display = display;
  }
}

//associando todos os input:radio ao método declarado acima.
for (var indice of tabs) {
  indice.onclick = tabOnClick;
}

<div class="col-md-12">

<div > 
    <input class="form-check-input" id="label1" type="radio" name="tabs" data-tab="tab1" value="empresa" checked  autocomplete="off"/>
    <input class="form-check-input" id="label2" type="radio" name="tabs" data-tab="tab2" value="funcionario" checked  autocomplete="off" />
     <input class="form-check-input" id="label3" type="radio" name="tabs" data-tab="tab3" value="estudante" checked  autocomplete="off" />
</div>
<div>
  <div id="tab1" data-content="" style="display: none;">
     <p> 
        Escreva o ramo 
    </p>
  </div>
  <div id="tab2" data-content="" style="display: none;">
    <p>
        Escreva o ramo que estuda Endereço 
    </p>
  </div>
  <div id="tab3" data-content="" style="display: none;">
    <p>
        Escreva o ramo que estuda Endereço da escola onde estuda
    </p>
  </div>
</div>

Answer 2

您正在尝试遍历NodeList-querySelectorAll()的结果。您也可以使用forEach() 此处：https://developer.mozilla.org/en-US/docs/Web/API/NodeList

Answer 3

尝试使用以下代码：

var tabOnClick = function (elem) {
    for (var indice in contents) {
        if (contents.hasOwnProperty(indice)) {
            //verificando se o input:radio selecionado está associado ao conteudo atual.
            var display = contents[indice].id === elem.target.dataset.tab ? "block" : "none";
            contents[indice].style.display = display;
        }
    }
}

TypeError：contents [indice] .css未定义，无法访问其属性“显示” [了解更多]

3 个答案: