aria-expanded kehrt undefined

ich mit Makeln und mit einigen Problemen zu arbeiten versuche mit ihm zurückkehr es Wert ist, hier ist meine jQuery:aria-expanded kehrt undefined

$(function() { 
    var x = $('#tab-battle').attr('aria-expanded'); 
    var y = $('#tab-tradeskills').attr('aria-expanded'); 
    console.log($('#tab-tradeskills').attr('aria-expanded')); 
    if (x == 'true'){ 
     $('#battle-wrapper').css('display', ''); 
    } 
    else{ 
     $('#battle-wrapper').css('display', 'none'); 
    } 
    if (y == 'true'){ 
     $('#tradeskill-wrapper').css('display', ''); 
    } 
    else{ 
     $('#tradeskill-wrapper').css('display', 'none'); 
    } 
});

Hier mein HTML ist:

<ul class="tabs"> 
    <li class="tab-battle active"><a id="tab-battle" data-toggle="tab" aria-expanded="true">Battle</a></li> 
    <li class="tab-tradeskills"><a id="tab-tradeskills" data-toggle="tab" aria-expanded="false">Trade Skills</a></li> 
</ul>

EDIT : Vergessen zu sagen: es kommt als undefiniert zurück.

var x = $('#tab-battle').attr('aria-expanded'); 
 
var y = $('#tab-tradeskills').attr('aria-expanded'); 
 
console.log($('#tab-tradeskills').attr('aria-expanded')); 
 
if (x == 'true'){ 
 
\t $('#battle-wrapper').css('display', ''); 
 
} 
 
else{ 
 
\t $('#battle-wrapper').css('display', 'none'); 
 
} 
 
if (y == 'true'){ 
 
\t $('#tradeskill-wrapper').css('display', ''); 
 
} 
 
else{ 
 
\t $('#tradeskill-wrapper').css('display', 'none'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li class="tab-battle active"><a id="tab-battle" data-toggle="tab" aria-expanded="true">Battle</a></li> 
 
    <li class="tab-tradeskills"><a id="tab-tradeskills" data-toggle="tab" aria-expanded="false">Trade Skills</a></li> 
 
</ul>

Hier ist meine volle HTML dies mein Haupt HTML-Datei ist, die serveral verschiedene HTML-Dateien enthält:

<html> 
<head> 
    <title># - KoG</title> 
    <link rel="stylesheet" type="text/css" href="../components/bootstrap/dist/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="../styles/game/default.css"> 
    <script src="../components/jquery/dist/jquery.min.js"></script> 
    <script src="../js/game.js"></script> 
</head> 

<body> 
<div class="container"> 
    <nav class="navbar navbar-default" role="navigation"> 
     <ul class="navbar navbar-nav"> 
      <li><button id="btn-actions">Actions</button></li> 
      <li><button id="btn-profile">Profile</button></li> 
      <li><button id="btn-kingdom">Kingdom</button></li> 
      <li><button id="btn-inventory">Inventory</button></li> 
      <li><button id="btn-alliance">Alliance</button></li> 
      <li><button id="btn-mail">Mail Box</button></li> 
      <li><button onclick="location.href='user/logout'" type="button">Logout</button></li> 
     </ul> 
    </nav> 
    <div class="main-content"> 
     <div class="sidebar" id="sidebar"> 
      <!-- Include Side Bar Left --> 
      <script> 
      $(function(){ 
       $('#sidebar').load('sidebar_left.ejs'); 
      }); 
      </script> 
     </div> 
     <div class="game"> 
      <div class="quest-bar"> 
       <p>Quest ###<p> 
      </div> 
      <div class="action-timer"> 
       Action Timer Place Holder 
      </div> 
      <div class="game-content" id="game-content"> 
      <!-- Import views --> 
       <script> 
       $(function(){ 
        $('#game-content').load('actions.ejs'); 
       }); 
       </script> 
      </div> 
     </div> 
     <div class="kingdom" id="kingdom"> 
      <!-- Include Side Bar Right --> 
      <script> 
      $(function(){ 
       $('#kingdom').load('sidebar_right.ejs'); 
      }); 
      </script> 
     </div> 
    </div> 
    <div class="statistics" id="stats-button statistics-h4"> 
     <div class="statistic-row" id='statistic-row'> 
      <!-- Include Statistics --> 
      <script> 
      $(function(){ 
       $('#statistic-row').load('statistics.ejs'); 
      }); 
      </script> 
     </div> 
    </div> 
</div> 
<script src="../components/bootstrap/dist/js/bootstrap.min.js"></script> 
</body> 
</html>

Meine Vermutung ist, es wird versucht, die ID zu lesen bevor die Datei eingebunden wird. EDIT: Okay, das ist nicht das Problem, aus irgendeinem Grund wird es keine Werte für Attribute für eine ID zurückgeben, und ich bin mir nicht ganz sicher, warum.

EDIT: Okay, so bin ich zu dem Schluss gekommen, dass es ist, weil ich diese HTML-Dateien einschließe. Was ich nicht verstehe, ist warum. Ich denke, dass jQuery geladen wird, bevor es die ID der enthaltenen Elemente aus der Datei lesen kann. Ich möchte lieber nicht für jede enthaltene HTML-Datei eine jQuery-Datei erstellen, nur um dies zu bekämpfen. Ich bin mir nicht einmal sicher, ob das auch funktionieren würde.

Quelle

2017-12-21 William

Was passiert mit dem, was Sie jetzt haben? Gibt es einen Fehler im Konsolenprotokoll? – guradio

Es ist zurück undefined – William

hinzugefügt die Demo Ihres Codes, die falsche zurückgibt – guradio

Ich habe es herausgefunden, ich musste die Last verwenden und die Funktion damit übergeben.

$('#game-content').load('actions.ejs', function(){ 
     $('#tab-battle').click(function(){ 
     var x = $('#tab-battle').attr('aria-expanded'); 
     if (x != 'true') { 
      $('#battle-wrapper').show(); 
      $('#tradeskill-wrapper').hide(); 
     } 
     }); 

     $('#tab-tradeskills').click(function(){ 
     var y = $('#tab-tradeskills').attr('aria-expanded'); 
     if (y == 'false') { 
      console.log(y); 
      $('#battle-wrapper').hide(); 
      $('#tradeskill-wrapper').show(); 
     } 
     }); 
    }); 
    } 
});

Quelle

2017-12-21 09:30:01 William

aria-expanded kehrt undefined

Antwort

Verwandte Themen