jQuery的.children()不是安装了jQuery的函数



我想用基于枚举的函数加入导航选项卡。我在这里找到了后者的一个很好的例子:https://www.aspsnippets.com/Articles/Using-Switch-Case-with-Enum-in-JavaScript.aspx

但我得到的是:children() is not a functionsiblings() is empty,这取决于我把函数调用和html标记放在哪里。

代码:

$(function(){
navTabActivate('one');
});
function navTabActivate(tab){
$('.nav-tabs a[id="' + tab + '"]').tab('show');
};
const TheNumber = {
"One": 1,
"Two": 2,
"Three": 3
};
var currentNumber = TheNumber.One
function number_switch(no) {
switch (parseInt(no)) {
case TheNumber.One:
console.log("And a one")
break;
case TheNumber.Two:
console.log("And a two")
break;
case TheNumber.Three:
console.log("And a three!")
break;
default:
currentNumber = TheNumber.One;
};
};
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<div class="row">
<div class="container">
<ul class="nav nav-tabs" id="menu">
<li class="nav-item" onclick="number_switch((this).children('a number'))">
<a class="nav-link" id="one" data-toggle="tab" number="1">1</a>
</li>
<li class="nav-item" onclick="number_switch((this).children('a number'))">
<a class="nav-link" id="two" data-toggle="tab" number="2">2</a>
</li>
<li class="nav-item" onclick="number_switch((this).children('a number'))">
<a class="nav-link" id="three" data-toggle="tab" number="3">3</a>
</li>
</ul>
<div class="tab-content menu" style="margin-top: 10px;">
<p>One</p>
</div>
</div>
</div>
</div>
</body>

请替换代码HTML:

<ul class="nav nav-tabs" id="menu">
<li class="nav-item" onclick="number_switch(this)">
<a class="nav-link" id="one" data-toggle="tab" number="1">1</a>
</li>
<li class="nav-item" onclick="number_switch(this)">
<a class="nav-link" id="two" data-toggle="tab" number="2">2</a>
</li>
<li class="nav-item" onclick="number_switch(this)">
<a class="nav-link" id="three" data-toggle="tab" number="3">3</a>
</li>
</ul>

和JS:

switch (parseInt(no.outerText)) {
}

最新更新