Jquery未捕获语法错误。适用于测试文件，但不适用于生产。下拉引导4主题选择器

时间：2018-03-10 17:15:50

标签： jquery twitter-bootstrap bootstrap-4

＆＃13;
＆＃13; 
$("#themeDropdown").click(function(e) {
  themes = {
    'Cerulean': 'https://bootswatch.com/4/cerulean/bootstrap.min.css',
    'Cosmo': 'https://bootswatch.com/4/cosmo/bootstrap.min.css',
    'Cyborg': 'https://bootswatch.com/4/cyborg/bootstrap.min.css',
    'Darkly': 'https://bootswatch.com/4/darkly/bootstrap.min.css',
    'Flatly': 'https://bootswatch.com/4/flatly/bootstrap.min.css',
    'Journal': 'https://bootswatch.com/4/journal/bootstrap.min.css',
    'Litera': 'https://bootswatch.com/4/litera/bootstrap.min.css',
    'Lumen': 'https://bootswatch.com/4/lumen/bootstrap.min.css',
    'Lux': 'https://bootswatch.com/4/lux/bootstrap.min.css',
    'Materia': 'https://bootswatch.com/4/materia/bootstrap.min.css',
    'Minty': 'https://bootswatch.com/4/minty/bootstrap.min.css',
    'Pulse': 'https://bootswatch.com/4/pulse/bootstrap.min.css',
    'Sandstone': 'https://bootswatch.com/4/sandstone/bootstrap.min.css',
    'Simplex': 'https://bootswatch.com/4/simplex/bootstrap.min.css',
    'Sketchy': 'https://bootswatch.com/4/sketchy/bootstrap.min.css',
    'Slate': 'https://bootswatch.com/4/slate/bootstrap.min.css',
    'Solar': 'https://bootswatch.com/4/solar/bootstrap.min.css',
    'Spacelab': 'https://bootswatch.com/4/spacelab/bootstrap.min.css',
    'Superhero': 'https://bootswatch.com/4/superhero/bootstrap.min.css',
    'United': 'https://bootswatch.com/4/united/bootstrap.min.css',
    'Yeti': 'https://bootswatch.com/4/yeti/bootstrap.min.css',
  }
  var choice = $("#themeDropdown")
  choice.text(this.innerHTML);
  if (choice[0].innerHTML in themes) {
    $('#bootswatch').attr('href', themes[choice[0].innerHTML])
  }
});
＆＃13; 
<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/4/lux/bootstrap.min.css" id="bootswatch" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item dropdown"></li>
    <a aria:expanded="false" aria:haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themeDropdown">Themes</a>
    <div aria:labelledby="themeDropdown" class="dropdown-menu">
      <a class="dropdown-item" href="#">Cerulean</a>
      <a class="dropdown-item" href="#">Cosmo</a>
      <a class="dropdown-item" href="#">Cyborg</a>
      <a class="dropdown-item" href="#">Darkly</a>
      <a class="dropdown-item" href="#">Flatly</a>
      <a class="dropdown-item" href="#">Journal</a>
      <a class="dropdown-item" href="#">Litera</a>
      <a class="dropdown-item" href="#">Lumen</a>
      <a class="dropdown-item" href="#">Lux</a>
      <a class="dropdown-item" href="#">Materia</a>
      <a class="dropdown-item" href="#">Minty</a>
      <a class="dropdown-item" href="#">Pulse</a>
      <a class="dropdown-item" href="#">Sandstone</a>
      <a class="dropdown-item" href="#">Simplex</a>
      <a class="dropdown-item" href="#">Sketchy</a>
      <a class="dropdown-item" href="#">Slate</a>
      <a class="dropdown-item" href="#">Solar</a>
      <a class="dropdown-item" href="#">Spacelab</a>
      <a class="dropdown-item" href="#">Superhero</a>
      <a class="dropdown-item" href="#">United</a>
      <a class="dropdown-item" href="#">Yeti</a>
      <a class="navbar-brand" href="#">hapsida</a>
    </div>
  </ul>
  <div class="jumbotron container context" style="padding-bottom:3; padding-top:40">
    <h1 class="bg-secondary" id="somethingelse">some thing else</h1>
    <div class="container" style="max-height: 70%; overflow: auto; margin-bottom: 20">
      <p>some other content</p>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

我正在尝试使用下拉菜单构建一个简单的bootswatch主题选择器。当我按原样测试代码时，它可以正常工作而没有任何错误，但是当我将其与其余代码放在一起时，它会抛出此错误。 

jquery-3.2.1.slim.js:1580 Uncaught Error: Syntax error, unrecognized expression: #
    at Function.Sizzle.error (jquery-3.2.1.slim.js:1580)
    at Sizzle.tokenize (jquery-3.2.1.slim.js:2232)
    at Sizzle.select (jquery-3.2.1.slim.js:2659)
    at Function.Sizzle [as find] (jquery-3.2.1.slim.js:884)
    at jQuery.fn.init.find (jquery-3.2.1.slim.js:2922)
    at new jQuery.fn.init (jquery-3.2.1.slim.js:3032)
    at jQuery (jquery-3.2.1.slim.js:98)
    at HTMLAnchorElement.<anonymous> (ascii.html:83)
    at HTMLDocument.dispatch (jquery-3.2.1.slim.js:5206)
    at HTMLDocument.elemData.handle (jquery-3.2.1.slim.js:5014)
Sizzle.error @ jquery-3.2.1.slim.js:1580
Sizzle.tokenize @ jquery-3.2.1.slim.js:2232
Sizzle.select @ jquery-3.2.1.slim.js:2659
Sizzle @ jquery-3.2.1.slim.js:884
find @ jquery-3.2.1.slim.js:2922
jQuery.fn.init @ jquery-3.2.1.slim.js:3032
jQuery @ jquery-3.2.1.slim.js:98
(anonymous) @ ascii.html:83
dispatch @ jquery-3.2.1.slim.js:5206
elemData.handle @ jquery-3.2.1.slim.js:5014

我确保正确加载了jquery，并且我还尝试通过删除各种元素进行调试，并且看起来下拉菜单本身会抛出错误。我真的不知道造成这种情况的原因，但我真的很感激一些指导。我试图找出导致此错误的原因，但对jquery的引用实际上是模糊的。为了进一步调试，我删除了所有元素，但错误仍然存​​在。

我的导航栏确实有另一个下拉列表，因此使用navbar或a或任何其他与下拉列表相关的类选择器都无法正常工作。

我正在测试最新的Chrome和Firefox

JSFiddle

为了完整起见，这是我的测试JSFiddle：

Test JSFiddle

2 个答案:

答案 0 :(得分：0)

我做了一些jQuery返工。我更改了选择器，更改了所有元素以使用$(".navbar a").click(function(e) { e.preventDefault(); themes = { 'Cerulean': 'https://bootswatch.com/4/cerulean/bootstrap.min.css', 'Cosmo': 'https://bootswatch.com/4/cosmo/bootstrap.min.css', 'Cyborg': 'https://bootswatch.com/4/cyborg/bootstrap.min.css', 'Darkly': 'https://bootswatch.com/4/darkly/bootstrap.min.css', 'Flatly': 'https://bootswatch.com/4/flatly/bootstrap.min.css', 'Journal': 'https://bootswatch.com/4/journal/bootstrap.min.css', 'Litera': 'https://bootswatch.com/4/litera/bootstrap.min.css', 'Lumen': 'https://bootswatch.com/4/lumen/bootstrap.min.css', 'Lux': 'https://bootswatch.com/4/lux/bootstrap.min.css', 'Materia': 'https://bootswatch.com/4/materia/bootstrap.min.css', 'Minty': 'https://bootswatch.com/4/minty/bootstrap.min.css', 'Pulse': 'https://bootswatch.com/4/pulse/bootstrap.min.css', 'Sandstone': 'https://bootswatch.com/4/sandstone/bootstrap.min.css', 'Simplex': 'https://bootswatch.com/4/simplex/bootstrap.min.css', 'Sketchy': 'https://bootswatch.com/4/sketchy/bootstrap.min.css', 'Slate': 'https://bootswatch.com/4/slate/bootstrap.min.css', 'Solar': 'https://bootswatch.com/4/solar/bootstrap.min.css', 'Spacelab': 'https://bootswatch.com/4/spacelab/bootstrap.min.css', 'Superhero': 'https://bootswatch.com/4/superhero/bootstrap.min.css', 'United': 'https://bootswatch.com/4/united/bootstrap.min.css', 'Yeti': 'https://bootswatch.com/4/yeti/bootstrap.min.css', } var choice = $(this).text(); if (choice in themes) { $('#bootswatch').attr('href', themes[choice]) } });。

<script src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/4/lux/bootstrap.min.css" id="bootswatch" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
  <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
    <li class="nav-item dropdown"></li>
    <a aria:expanded="false" aria:haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)" id="themeDropdown">Themes</a>
    <div aria:labelledby="themeDropdown" class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0)">Cerulean</a>
      <a class="dropdown-item" href="javascript:void(0)">Cosmo</a>
      <a class="dropdown-item" href="javascript:void(0)">Cyborg</a>
      <a class="dropdown-item" href="javascript:void(0)">Darkly</a>
      <a class="dropdown-item" href="javascript:void(0)">Flatly</a>
      <a class="dropdown-item" href="javascript:void(0)">Journal</a>
      <a class="dropdown-item" href="javascript:void(0)">Litera</a>
      <a class="dropdown-item" href="javascript:void(0)">Lumen</a>
      <a class="dropdown-item" href="javascript:void(0)">Lux</a>
      <a class="dropdown-item" href="javascript:void(0)">Materia</a>
      <a class="dropdown-item" href="javascript:void(0)">Minty</a>
      <a class="dropdown-item" href="javascript:void(0)">Pulse</a>
      <a class="dropdown-item" href="javascript:void(0)">Sandstone</a>
      <a class="dropdown-item" href="javascript:void(0)">Simplex</a>
      <a class="dropdown-item" href="javascript:void(0)">Sketchy</a>
      <a class="dropdown-item" href="javascript:void(0)">Slate</a>
      <a class="dropdown-item" href="javascript:void(0)">Solar</a>
      <a class="dropdown-item" href="javascript:void(0)">Spacelab</a>
      <a class="dropdown-item" href="javascript:void(0)">Superhero</a>
      <a class="dropdown-item" href="javascript:void(0)">United</a>
      <a class="dropdown-item" href="javascript:void(0)">Yeti</a>
      <a class="navbar-brand" href="javascript:void(0)">hapsida</a>
    </div>
  </ul>
  <div class="jumbotron container context" style="padding-bottom:3; padding-top:40">
    <h1 class="bg-secondary" id="somethingelse">some thing else</h1>
    <div class="container" style="max-height: 70%; overflow: auto; margin-bottom: 20">
      <p>some other content</p>
    </div>
  </div>
airbnb_soup.find_all('span')[-1].contents

答案 1 :(得分：0)

解决了我的问题。我的问题是我在dom完成填充之前加载了脚本。

相关问题
最新问题