我正在建立一个Squarespace网站，并且我将代码块用于无法在平台上构建的功能。例如，我找到了一个在移动设备上效果更好的画廊，所以我想使用它。一个可以正常工作，但是当我在同一页面上插入两个时，代码块似乎相互冲突，因此只有一个可以工作。
发生同样的事情，当我使用两个非常不同的代码块时，其中一个似乎与另一个发生冲突。关于如何处理此问题的任何好的建议？也许重命名了一些相同的元素，可能跨越了块，所以名称变得唯一了？
图库代码示例，一个很好用，而两个不在同一页面上。
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://images.com/car.jpg" style="width:100%">
<img class="mySlides" src="https://images.com/cat.jpg" style="width:100%">
<img class="mySlides" src="https://images.com/apple.jpg" style="width:100%">
<img class="mySlides" src="https://images.com/hat.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 4 seconds
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>
<body>
<div class="w3-content w3-display-container">
<img class="mySlides" src="https://images.com/car.jpg" style="width:100%">
<img class="mySlides" src="https://images.com/cat.jpg" style="width:100%">
<img class="mySlides" src="https://images.com/dog.jpg" style="width:100%">
<img class="mySlides" src="https://images.com/apple.jpg" style="width:100%">
<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">❮</button>
<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">❯</button>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 4000); // Change image every 4 seconds
}
</script>
</body>
</html>
遗憾的是，该特定解决方案仅在页面上使用一次。它被粗略地表示为展示一些基本思想，并且实际上利用了并非最佳实践的技术（我只是为了强调它是为了传达总体概念而不是为了高级实现而编写的）。结果，相应地很难最小化代码以在单个页面上容纳其多个实例。恐怕完全重写它可能会更快，更容易和更好（这超出了StackOverflow的典型答案）。
但是，总的来说，如果您真的想尝试使该特定解决方案适应单个页面上的多个实例（不建议这样做，因为它可能会导致沮丧，但是如果您陷入其中，则可以：]]
1）删除不必要的代码。
在问题中显示的任何复制/粘贴代码的地方，请从开头删除以下六行：<!DOCTYPE html><html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
以及最后两行：
</body></html>
之所以这样做，是因为在添加代码块之前，此类代码已经在您的网站上进行了计算。也就是说，通过保留它们，您将包含代码块中不应该存在的行。2）更新每个代码副本中的某些代码行。
每当创建第二，第三等代码副本时，都需要更新四行。它们是：.mySlides {display:none;}<img class="mySlides" ...（对于您包含的每个图像）var x = document.getElementsByClassName("mySlides");（在showDivs函数内部）var x = document.getElementsByClassName("mySlides")（轮播功能内部）
每次在同一页面上再次复制代码时，都需要将mySlides更改为其他内容，例如mySlides2。如果您在单个页面上有三个图库，则该代码的第三个副本将使用mySlides3，依此类推。
然后，您将以相似的方式（在末尾添加数字，plusDivs2，showDivs2等）来更新函数名称，以类似方式更新在页面上放置的每个代码。每个功能都被引用/调用（例如在按钮onclick属性中）。
最后，以相同的方式将var slideIndex更新为var slideIndex2等，以适用于代码的每个实例。
进行上述操作，理论上将允许该代码在页面上多次使用。正如我说的那样，这种方法在很多方面都是不利的，但是我想确保即使没有建议，我也可以直接回答您的实际问题。