Question

我正在尝试切换并遇到一些问题，它返回它的价值，这是我的jQuery：

$(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');
    }
});

这是我的HTML：

<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>

编辑：忘了说：它以未定义的方式返回。

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');
}

<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>

这是我的完整HTML，这是我的主要html文件，其中包含几个不同的HTML文件：

<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>

我的猜测是，它试图在文件被包含之前读取id。编辑：好的，所以这不是问题，由于某种原因它不会返回任何id的任何属性的任何值，我不确定为什么。

编辑：好的，所以我得出的结论是，因为我包含了这些html文件。我不明白的是为什么。我想jQuery在它可以读取所述文件中包含的元素的ID之前加载。我宁愿不必为每个包含的HTML文件制作一个jQuery文件来解决这个问题。我甚至不确定那也行。

Answer 1

我已经明白了，我不得不使用加载并传入函数。

    $('#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();
        }
      });
    });
  }
});

咏叹调扩大的回报未定义

1 个答案: