使用JavaScript

时间：2017-01-16 13:06:12

标签： javascript html

这是我的XSLT / HTML：

    **<body xmlns="http://www.w3.org/1999/xhtml">
    <div class="spacer"></div>
    <a href="https://www.youtube.com">
      <img id="img" src="http://i.imgur.com/nK9DEVv.png" />
    </a>
    <nav>
      <ul>
        <li>
          <a href="home.html">Playlists</a>
          <ul>
            <li>
              <a href="../XMLTube.xml#body">Playlist</a>
            </li>
            <li>
              <a href="">Playlists</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="portfolio.html">Utilizadores</a>
          <ul>
            <li>
              <a href="Portfolio.html#NOSLeague">Um utilizador</a>
            </li>
            <li>
              <a href="Portfolio.html#PremierLeague">Lista geral de utilizadores</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="contacts.html">Vídeos</a>
          <ul>
            <li>
              <a href="Contacts.html#gui">Vídeo</a>
            </li>
            <li>
              <a href="Contacts.html#rodri">Lista geral de vídeos</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
    <h2>Vídeos publicados</h2>
    <article class="lista">
      <h3>Who let the dogs out? - Baha Men</h3>
      <button class="show" onclick="showOrHide()">Show</button>
      <hr class="title" />
      <div class="data" style="display: block;"><iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/He82NBjJqf8"></iframe><br /><strong>De:</strong>Daisy<hr class="spacers" /><strong>Descrição:</strong>My favorite song, lol.<hr class="spacers" /><strong>Related:</strong>None<hr class="spacers" /><strong>Número de Likes:</strong>1<hr class="spacers" /><strong>Número de comentários:</strong>1<div class="blank"></div></div>
    </article>
    <article class="lista">
      <h3>Desiigner - Timmy Turner</h3>
      <button class="show" onclick="showOrHide()">Show</button>
      <hr class="title" />
      <div class="data" style="display: block;"><iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/ProbPpO_8oo"></iframe><br /><strong>De:</strong>Guicky<hr class="spacers" /><strong>Descrição:</strong>Timmy Timmy Timmy Turner.<hr class="spacers" /><strong>Related:</strong>I'm all the way up - Fat Joe e Putzgrilla - Sentadinha<hr class="spacers" /><strong>Número de Likes:</strong>2<hr class="spacers" /><strong>Número de comentários:</strong>0<div class="blank"></div></div>
    </article>
    <article class="lista">
      <h3>I'm all the way up - Fat Joe</h3>
      <button class="show" onclick="showOrHide()">Show</button>
      <hr class="title" />
      <div class="data" style="display: block;"><iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/y2ak_oBeC-I"></iframe><br /><strong>De:</strong>Guicky<hr class="spacers" /><strong>Descrição:</strong>Nothing can stop me, I'm all the way up.<hr class="spacers" /><strong>Related:</strong>Desiigner - Timmy Turner<hr class="spacers" /><strong>Número de Likes:</strong>4<hr class="spacers" /><strong>Número de comentários:</strong>0<div class="blank"></div></div>
    </article>
    <article class="lista">
      <h3>Putzgrilla - Sentadinha</h3>
      <button class="show" onclick="showOrHide()">Show</button>
      <hr class="title" />
      <div class="data" style="display: block;"><iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/QC4JbIvIhdI"></iframe><br /><strong>De:</strong>Anabela65<hr class="spacers" /><strong>Descrição:</strong>Dá uma sentadinha.<hr class="spacers" /><strong>Related:</strong>Desiigner - Timmy Turner<hr class="spacers" /><strong>Número de Likes:</strong>2<hr class="spacers" /><strong>Número de comentários:</strong>0<div class="blank"></div></div>
    </article>
    <article class="lista">
      <h3>Yann Tiersen - La Valse d'Amelie</h3>
      <button class="show" onclick="showOrHide()">Show</button>
      <hr class="title" />
      <div class="data" style="display: block;"><iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/uzurqBnALkw"></iframe><br /><strong>De:</strong>Izzie<hr class="spacers" /><strong>Descrição:</strong>A minha música preferida.<hr class="spacers" /><strong>Related:</strong>None<hr class="spacers" /><strong>Número de Likes:</strong>2<hr class="spacers" /><strong>Número de comentários:</strong>0<div class="blank"></div></div>
    </article>
  </body>**

</xsl:stylesheet>

我有一个名为data的类，它将提供4个div。

这是我的javascript：

function showOrHide() {
var j = document.getElementsByClassName("data").length;
var h = document.getElementsByClassName("show").length;

for (var i = 0; i < j; i++) {
    for (var l = 0; l < h; l++) {
        if (document.getElementsByClassName("data")[i].style.display = 'block') {
            document.getElementsByClassName("show")[l].addEventListener("click", function () {
                document.getElementsByClassName("data")[i].style.display = 'none';

            });
        }

        else {
            document.getElementsByClassName("show")[l].addEventListener("click", function () {
                document.getElementsByClassName("data")[i].style.display = 'block';

            });
        }
    }
}

}

我是JavaScript的初学者，我只想让每篇文章中的按钮隐藏它下方的<div>。我基本上做了两个for的迭代遍历类。我有什么不对？你可以请赐教吗？

3 个答案:

答案 0 :(得分：1)

对于DOM元素操作，我建议你使用jQuery，它会有很大帮助。这是一个非常好的CodeAcademy教程，用于学习基础知识，我在开始时使用了该教程。

在jQuery中你的问题将解决如下：

$(document).ready(function () {
    $('.show').click(function () {
        var $div = $(this).siblings('.data');
        if($($div).css('display') == 'none'){
            $($div).show();
        } else {
            $($div).hide();
        }
    });
});

正如我所说，如果你正在操纵DOM元素，jQuery会节省你的时间和行。

答案 1 :(得分：1)

以下是帮助您的示例代码段。

建议不是将处理程序showOrHide放在HTML中，而是在JavaScript中处理它，如下面的代码所示。

方法是：

  • 使用document.querySelectorAll
    • 查找所有articles
  • 使用forEach对每个元素进行迭代，找到data元素和button元素
  • 将click处理程序附加到button
  • 单击按钮时，检查div是否已经可见，如果是，则隐藏它;否则显示它。

＆＃13;
＆＃13; 
document.querySelectorAll("article.lista").forEach(function(element, index, array) {

  var button = element.querySelector("button.show");
  var data = element.querySelector("div");
  button.addEventListener("click", function() {
    var display = data.style.display;
    if (display == "block") {
      data.style.display = "none";
    } else {
      data.style.display = "block";
    }
  });

});
＆＃13; 
<article class="lista">
  <h3>Who let the dogs out? - Baha Men</h3>
  <button class="show">Show</button>
  <hr class="title" />
  <div class="data" style="display: none;">
    <iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/He82NBjJqf8"></iframe>
    <br /><strong>De:</strong>Daisy
    <hr class="spacers" /><strong>Descrição:</strong>My favorite song, lol.
    <hr class="spacers" /><strong>Related:</strong>None
    <hr class="spacers" /><strong>Número de Likes:</strong>1
    <hr class="spacers" /><strong>Número de comentários:</strong>1
    <div class="blank"></div>
  </div>
</article>
<article class="lista">
  <h3>Desiigner - Timmy Turner</h3>
  <button class="show">Show</button>
  <hr class="title" />
  <div class="data" style="display: none;">
    <iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/ProbPpO_8oo"></iframe>
    <br /><strong>De:</strong>Guicky
    <hr class="spacers" /><strong>Descrição:</strong>Timmy Timmy Timmy Turner.
    <hr class="spacers" /><strong>Related:</strong>I'm all the way up - Fat Joe e Putzgrilla - Sentadinha
    <hr class="spacers" /><strong>Número de Likes:</strong>2
    <hr class="spacers" /><strong>Número de comentários:</strong>0
    <div class="blank"></div>
  </div>
</article>
<article class="lista">
  <h3>I'm all the way up - Fat Joe</h3>
  <button class="show">Show</button>
  <hr class="title" />
  <div class="data" style="display: none;">
    <iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/y2ak_oBeC-I"></iframe>
    <br /><strong>De:</strong>Guicky
    <hr class="spacers" /><strong>Descrição:</strong>Nothing can stop me, I'm all the way up.
    <hr class="spacers" /><strong>Related:</strong>Desiigner - Timmy Turner
    <hr class="spacers" /><strong>Número de Likes:</strong>4
    <hr class="spacers" /><strong>Número de comentários:</strong>0
    <div class="blank"></div>
  </div>
</article>
<article class="lista">
  <h3>Putzgrilla - Sentadinha</h3>
  <button class="show">Show</button>
  <hr class="title" />
  <div class="data" style="display: none;">
    <iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/QC4JbIvIhdI"></iframe>
    <br /><strong>De:</strong>Anabela65
    <hr class="spacers" /><strong>Descrição:</strong>Dá uma sentadinha.
    <hr class="spacers" /><strong>Related:</strong>Desiigner - Timmy Turner
    <hr class="spacers" /><strong>Número de Likes:</strong>2
    <hr class="spacers" /><strong>Número de comentários:</strong>0
    <div class="blank"></div>
  </div>
</article>
<article class="lista">
  <h3>Yann Tiersen - La Valse d'Amelie</h3>
  <button class="show">Show</button>
  <hr class="title" />
  <div class="data" style="display: none;">
    <iframe width="420" height="315" allowfullscreen="" src="https://www.youtube.com/embed/uzurqBnALkw"></iframe>
    <br /><strong>De:</strong>Izzie
    <hr class="spacers" /><strong>Descrição:</strong>A minha música preferida.
    <hr class="spacers" /><strong>Related:</strong>None
    <hr class="spacers" /><strong>Número de Likes:</strong>2
    <hr class="spacers" /><strong>Número de comentários:</strong>0
    <div class="blank"></div>
  </div>
</article>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

你在脚本中犯了两个错误，第一个是调用变量＆＃34; i＆＃34;在你的回调中。第二个是使用=而不是==进行测试（if（document（...）。display =＆＃39; block＆＃39;）。如果你是初学者，可能很难理解第一个错误。我们来试试吧。

你声明＆＃34;我＆＃34;在主要范围（窗口），＆＃34; i＆＃34;会有不同的值，从0到＆＃34; j＆＃34;。

当for循环完成时，＆＃34; i＆＃34;将具有最大值，＆＃34; j＆＃34;。 当回调＆＃34;点击＆＃34;将被称为＆＃34; i＆＃34;仍然是＆＃34; j＆＃34;。

没有元素 
document.getElementsByClassName("data")[j].

有许多方法可以纠正您的脚本。 通过Array.forEach，您可以使用匿名函数来保持＆＃34; i＆＃34;执着：

＆＃13;
＆＃13; 
var dataElements = document.getElementsByClassName("data");
var showElements = document.getElementsByClassName("show");

dataElements.forEach(function(dataElement, i, dataElements) {
  
  // function(dataElement, i, dataElements) is an anonymous function, created expressly for parsing dataElements
  // in this scope, "i" will always keep the same value
  // but we don't need "i" anymore, because dataElement == document.getElementsByClassName("data")[i]
  
  showElements.forEach(function(showElement, j, showElements) {
    
    showElement.addEventListener('click', function(event) {
      
      if (dataElement.style.display == 'block')
        dataElement.style.display = 'none';
      else
        dataElement.style.display = 'block';
      
    });
    
  }),
  
});
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题