具有相同ID導致錯誤的多個HTML元素

-2

我目前遇到了一個問題，在我的HTML文檔中，我有一個旋轉木馬，並且在每張幻燈片中出現一個新按鈕，所有這些都在做同樣的事情。這些按鈕中的每一個都是導航欄切換按鈕，如果按下該按鈕，則會顯示導航欄。具有相同ID導致錯誤的多個HTML元素

我遇到的問題是，在我給出的代碼中，它只是爲其中一個按鈕起作用，第一個加載，因爲它通過var showRightPush = document.getElementByID聲明變量。問題是我希望能夠在每張幻燈片上單擊此按鈕。

下面是我的代碼，舊代碼以及完整上下文中的代碼。謝謝。

MY CODE

<script> 
    var menuRight = document.getElementById('cbp-spmenu-s2'), 
    showRightPush = document.getElementsByClassName('navbar-toggle'), 
    body = document.body; 


    showRightPush.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(body, 'cbp-spmenu-push-toleft'); 
    classie.toggle(menuRight, 'cbp-spmenu-open'); 
    disableOther('navbar-toggle'); 
    }; 


</script>

OLD CODE

<script> 
    var menuRight = document.getElementById('cbp-spmenu-s2'), 
    showRightPush = document.getElementById('showRightPush'), 
    body = document.body; 


    showRightPush.onclick = function() { 
    classie.toggle(this, 'active'); 
    classie.toggle(body, 'cbp-spmenu-push-toleft'); 
    classie.toggle(menuRight, 'cbp-spmenu-open'); 
    disableOther('showRightPush'); 
    }; 


</script>

全碼

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title><?php bloginfo('name'); ?> </title> 

    <!-- Bootstrap core CSS --> 
    <link href="<?php bloginfo('template_directory'); ?>/css/bootstrap.css" rel="stylesheet"> 

    <!-- Sidebar core CSS --> 
    <link href="<?php bloginfo('template_directory'); ?>/css/simple-sidebar.css" rel="stylesheet"> 

    <!-- Add custom CSS here --> 
    <link href="<?php bloginfo('template_directory'); ?>/style.css" rel="stylesheet"> 
    <link href="<?php bloginfo('template_directory'); ?>/css/default.css" rel="stylesheet"> 
    <link href="<?php bloginfo('template_directory'); ?>/css/component.css" rel="stylesheet"> 

    </head> 

<body class="cbp-spmenu-push"> 

     <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2"> 
     <h3><?php bloginfo('name'); ?></h3> 
     <a href="#">About</a> 
     <a href="#">Submit</a> 
     <a href="#">Subscribe</a> 
     <a href="#">Follow</a> 
     <a href="#">Contact</a> 
     </nav> 


     <?php 
    $number = 0; 
    query_posts(array('post_type' => 'facts')); 
    if(have_posts()): 
    ?> 
    <div id="myCarousel" class="carousel slide"> 
     <ol class="carousel-indicators"> 
     <?php while(have_posts()): the_post(); ?> 
      <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li> 
     <?php endwhile; ?> 
     </ol> 

     <!-- Carousel items --> 
     <div class="carousel-inner"> 
     <?php while(have_posts()): the_post(); ?> 

     <div class="item"> 
      <nav class="navbar navbar-top navbar-inverse visible-xs <?php foreach(get_the_category() as $category) {echo $category->slug;} ?>" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" id="showRightPush" class="btn btn-default navbar-toggle" > 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#"><img src="<?php bloginfo('template_directory'); ?>/images/brains.png" alt=""> </a> 
      </div> <!-- end navbar-header --> 
      </div> <!-- end container --> 
      </nav> <!-- end navbar --> 

      <nav class="navbar navbar-fixed-bottom navbar-inverse visible-xs bottom-nav-colour" role="navigation"> 
      <div class="container"> 
       <div class="navbar-header text-center"> 
       <ul class="bottom-directions"> 
        <li><a href="#myCarousel" class="bottom-arrow-nav" data-slide="prev"><img src="<?php bloginfo('template_directory'); ?>/images/prev.png" alt=""></a></li> 
        <li><a href="#myCarousel" class="bottom-arrow-nav" data-slide="random"><img src="<?php bloginfo('template_directory'); ?>/images/random.png" alt=""></a></li> 
        <li><a href="#myCarousel" class="bottom-arrow-nav no-border-right" data-slide="next"><img src="<?php bloginfo('template_directory'); ?>/images/next.png" alt=""></a></li> 
       <ul> 
       </div> <!-- end navbar-header --> 
      </div><!-- /.container --> 
      </nav> <!-- end navbar --> 

      <div class="fact-number-container <?php foreach(get_the_category() as $category) {echo $category->slug;} ?>"> 
      <div class="container"> 
       <div class="fact-header"> 
       <h3>/Fact <span class="fact-number"><?php echo(types_render_field("fact-number", array())); ?></span></h3> 
       </div> <!-- end fact-header --> 
      </div> <!-- end container --> 
      </div> <!-- end fact-number-container --> 

      <div class="fact-text-container"> 
      <div class="container"> 
       <div class="fact-text"> 
       <p><?php echo(types_render_field("fact-text", array())); ?></p> 
       </div> <!-- end fact-text --> 
      </div> <!-- end container --> 
      </div> <!-- end fact-text-container --> 

      <div class="tweet-this-container"> 
      <div class="container"> 
       <a href="#"> 
       <div class="tweet-this "> 
        <p><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="">Share this fact like a champ</p> 
       </div> <!-- end tweet-this --> 
       </a> 
      </div> <!-- end container --> 
      </div> <!-- end tweet-this-container --> 
     </div> <!-- end item --> 
     <?php endwhile; ?> 
     </div> 
    </div> 
    <?php endif; wp_reset_query(); ?> 



    <!-- Bootstrap core JavaScript --> 
    <!-- Placed at the end of the document so the pages load faster --> 
    <!-- Make sure to add jQuery - download the most recent version at http://jquery.com/ --> 
    <script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/js/classie.js"></script> 
    <script src="<?php bloginfo('template_directory'); ?>/js/modernizr.custom.js"></script> 
    <script type="text/javascript" src="//use.typekit.net/gyv3ykj.js"></script> 
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script> 

    <script> 
     var menuRight = document.getElementById('cbp-spmenu-s2'), 
     showRightPush = document.getElementsByClassName('navbar-toggle'), 
     body = document.body; 


     showRightPush.onclick = function() { 
     classie.toggle(this, 'active'); 
     classie.toggle(body, 'cbp-spmenu-push-toleft'); 
     classie.toggle(menuRight, 'cbp-spmenu-open'); 
     disableOther('navbar-toggle'); 
     }; 


    </script> 
    <script> 
    jQuery(document).ready(function(){ 
     $(".carousel-indicators li:first").addClass("active"); 
     $(".carousel-inner .item:first").addClass("active"); 
    }); 
    </script> 


    </body> 
</html>

來源

2013-10-09 Keyfer Mathewson

你可以更改多少代碼/ html？當你有一些不是唯一的東西時，最好遠離id。 –

*「具有相同ID的多個HTML元素導致錯誤」*，是的。這是一個無效的HTML開始。 –

是的，我試圖改變它來調用類的代碼，但它不工作。這就是我提出這個問題的全部原因。 –

showRightPush = document.getElementsByClassName('navbar-toggle'), 

    showRightPush.onclick = function() { 
     /* ... */ 
    };

噢天啊，那不會工作！我剛纔已經回答了這個問題：Javascript change width of div onclick

而且只會copypaste我的回答：

document.getElementsByClassName回報有所元素的數組，所以你不能簡單地稱其爲一個DOM元素，希望它會工作，當你引用集合中的每個元素（可能在jQuery中，順便說一句），所以你必須使用foreach循環（無論你如何實現這一點 - 通過簡單的for()，或for(x in y)或任何其他方式）。

我通常使用Array.forEach功能，但具體類型由document.getElementsByClassName返回沒有原型這種功能的陣列的，所以你必須使用 [].forEach.call(inWhat,function(what){})語法，或退回到 for(...)語法。

來源

2013-10-09 21:58:07 dbanet

首先，請注意，getElementsByClassName方法僅適用於9或更高版本的Internet Explorer。您可以使用像this one這樣的polyfill在較舊的瀏覽器中啓用該功能，或使用其他方法查找具有正確類名稱的元素。話雖如此，你必須迭代按鈕並綁定每個按鈕的點擊事件。

var showRightPush = document.getElementsByClassName('navbar-toggle'); 
for (var i = 0; i < showRightPush.length; i++) { 
    showRightPush[i].onclick = function() { ... } 
}

來源

2013-10-09 22:02:08

我真的不明白你的意思，它不是很清楚。但據我瞭解，你應該這樣做（我使用jQuery，因爲你標記它）

$('.navbar-toggle').on('click', function() { 
    ...some events 
    var class_header = $(this).parent().attr('class'); 
    var index = $('.'+class_header).indexOf($(this).parent()); 
    $('.'+class_header).eq(index+1).append('/*whatever you want, here your button */'); 
    };

來源

2013-10-09 22:15:00 Newben

具有相同ID導致錯誤的多個HTML元素

回答

相關問題