当我组合我的 HTML、CSS 和 JS 时，JS 在除 Codepen 之外的任何地方都不起作用 [关闭]

Question

我对任何类型的编码都是全新的，但我需要制作一个交互式地图。我使用 Codepen 完成全部工作，并在那里工作。当我结合 html、css 和 js 嵌入到网站中时，js 不再起作用。如果我将这三个上传到一个新的编码系统，js 就不起作用了。我怎样才能将这三个组合成一个有效的 html 以嵌入到网站中？

Codepen 中没有错误消息，并且在那里工作得很好。我的猜测是我没有正确组合它们。

完整代码

JS在下面。

我尝试将这三个组合在一起，我让 CSS 和 html 工作，但是在 js 中编码的切换不起作用。

$(".marker-arvada").ready(function() {
  $(".hide").hide();
  $(".marker-arvada").click(function() {
    $(".first-txt").toggle();
  });
});

$(".marker-denver").ready(function() {
  $(".hide").hide();
  $(".marker-denver").click(function() {
    $(".second-txt").toggle();
  });
});

$(".marker-arvada").ready(function() {
  $(".hide").hide();
  $(".marker-arvada").click(function() {
    $(".hide").hide();
    $(".first-txt").fadeIn();
  });
});

$(".marker-denver").ready(function() {
  $(".hide").hide();
  $(".marker-denver").click(function() {
    $(".hide").hide();
    $(".second-txt").fadeIn();
  });
});
$(".marker-coloradosprings").ready(function() {
  $(".hide").hide();
  $(".marker-coloradosprings").click(function() {
    $(".hide").hide();
    $(".fourth-txt").fadeIn();
  });
});

$(".marker-breckenridge").ready(function() {
  $(".hide").hide();
  $(".marker-breckenridge").click(function() {
    $(".hide").hide();
    $(".fifth-txt").fadeIn();
  });
});

$(".marker-durango").ready(function() {
  $(".hide").hide();
  $(".marker-durango").click(function() {
    $(".hide").hide();
    $(".sixth-txt").fadeIn();
  });
});

$(".marker-montrose").ready(function() {
  $(".hide").hide();
  $(".marker-montrose").click(function() {
    $(".hide").hide();
    $(".seventh-txt").fadeIn();
  });
});

$(".marker-fortcollins").ready(function() {
  $(".hide").hide();
  $(".marker-fortcollins").click(function() {
    $(".hide").hide();
    $(".eighth-txt").fadeIn();
  });
});

$(".marker-glenwoodsprings").ready(function() {
  $(".hide").hide();
  $(".marker-glenwoodsprings").click(function() {
    $(".hide").hide();
    $(".ninth-txt").fadeIn();
  });
});

$(".marker-pueblo").ready(function() {
  $(".hide").hide();
  $(".marker-pueblo").click(function() {
    $(".hide").hide();
    $(".tenth-txt").fadeIn();
  });
});

$(".marker-pueblohalf").ready(function() {
  $(".hide").hide();
  $(".marker-pueblohalf").click(function() {
    $(".hide").hide();
    $(".tenth-txt").fadeIn();
  });
});

$(".marker-canoncity").ready(function() {
  $(".hide").hide();
  $(".marker-canoncity").click(function() {
    $(".hide").hide();
    $(".eleventh-txt").fadeIn();
  });
});

$(".marker-alamosa").ready(function() {
  $(".hide").hide();
  $(".marker-alamosa").click(function() {
    $(".hide").hide();
    $(".twelfth-txt").fadeIn();
  });
});

$(".marker-fortmorgan").ready(function() {
  $(".hide").hide();
  $(".marker-fortmorgan").click(function() {
    $(".hide").hide();
    $(".thirteenth-txt").fadeIn();
  });
});

$(".marker-steamboatsprings").ready(function() {
  $(".hide").hide();
  $(".marker-steamboatsprings").click(function() {
    $(".hide").hide();
    $(".fourteenth-txt").fadeIn();
  });
});

$(".marker-northglenn").ready(function() {
  $(".hide").hide();
  $(".marker-northglenn").click(function() {
    $(".hide").hide();
    $(".seventeenth-txt").fadeIn();
  });
});

$(".marker-greenwoodvillage").ready(function() {
  $(".hide").hide();
  $(".marker-greenwoodvillage").click(function() {
    $(".hide").hide();
    $(".eighteenth-txt").fadeIn();
  });
});

$(".marker-greeley").ready(function() {
  $(".hide").hide();
  $(".marker-greeley").click(function() {
    $(".hide").hide();
    $(".nineteenth-txt").fadeIn();
  });
});

$(".marker-boulder").ready(function() {
  $(".hide").hide();
  $(".marker-boulder").click(function() {
    $(".hide").hide();
    $(".twentieth-txt").fadeIn();
  });
});

$(".marker-grandjunction").ready(function() {
  $(".hide").hide();
  $(".marker-grandjunction").click(function() {
    $(".hide").hide();
    $(".twenty-first-txt").fadeIn();
  });
});

$(".marker-cortez").ready(function() {
  $(".hide").hide();
  $(".marker-cortez").click(function() {
    $(".hide").hide();
    $(".twenty-second-txt").fadeIn();
  });
});

Answer 1

我会确保 HTML 文件中 head 标签之间的内容是正确的。然后，确保你的 JS 文件在你的文件夹结构中它应该在的位置（HTML 文件认为它在的位置）。

例如，下面的标签将放在您的 head 标签中。

这需要与您的 HTML 文件位于同一文件夹中，以便它们正常工作。