无法在 jQuery 中使用颜色框
Posted
技术标签:
【中文标题】无法在 jQuery 中使用颜色框【英文标题】：Unable to use Colorbox in jQuery 【发布时间】：2019-04-26 18:16:04 【问题描述】：我正在为 jQuery 使用 Colorbox。我从http://www.jacklmoore.com/colorbox/下载了插件
下面是我的 jQuery 代码：
<script type="text/javascript">
$('#gallery').colorbox();
</script>
html 代码：
<!doctype html>
<html lang="en">
<head>
<title>JQuery - Chapter 4</title>
<link rel="stylesheet" href="CSS/colorbox.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="JS/jquery.colorbox.js"></script>
<script src="JS/jquery-3.3.1.js"></script>
</head>
<body>
<a id="gallery" href="images/dog.jpeg">Dog</a>
<a id="gallery" href="images/horse.jpg">Horse</a>
<a id="gallery" href="images/tree.jpg">Tree</a>
</body>
当我单击图像名称时，它不会触发 colorbox() 方法。而是将我带到图像源。
谢谢
【问题讨论】：
【参考方案1】：如前所述，每个元素都必须有一个唯一的 ID。如果要对它们进行分组，则应使用 Class 属性。这也是指南中的概述：http://www.jacklmoore.com/colorbox/guide/
$(function()
$('.gallery').colorbox(
rel: "group1"
);
);<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<a id="gallery-1" class="gallery" href="https://i.imgur.com/t5L4otE.jpg">Dog</a>
<a id="gallery-2" class="gallery" href="https://i.imgur.com/wZHWtP3.jpg">Horse</a>
<a id="gallery-3" class="gallery" href="https://i.imgur.com/ihH1kfg.jpg">Tree</a>这个 sn-p 按预期工作。 jQuery 必须在插件之前加载。由于您正在加载 Bootstrap（使用 jQuery）和 jQuery 库，您可能会得到一些奇怪的结果。所以我会调查哪个是更好的库。
相对
这可以用作 Colorbox 的锚 rel 替代品。这允许用户将任何元素组合组合在一起以用于画廊，或者覆盖现有的 rel 以便元素不组合在一起。
$("a.gallery").colorbox(rel:"group1");注意：该值也可以设置为 'nofollow' 以禁用分组。
希望对您有所帮助。
【讨论】：
【参考方案2】：需要进行 2 处修改：
1) 为所有锚标签提供唯一 ID，例如 gallery1、gallery2、gallery3 和
2) 添加click js函数以在每个锚标签上调用colorbox
如下：
<script type="text/javascript">
function colorbox1()
$('#gallery1').colorbox();
return false;
function colorbox2()
$('#gallery2').colorbox();
return false;
function colorbox3()
$('#gallery3').colorbox();
return false;
</script>
在 HTML 中：
<body>
<a id="gallery1" click="return colorbox1();" href="images/dog.jpeg">Dog</a>
<a id="gallery2" click="return colorbox1();" href="images/horse.jpg">Horse</a>
<a id="gallery3" click="return colorbox1();" href="images/tree.jpg">Tree</a>
</body>
【讨论】：
我正在尝试将图像显示为一个组。试过代码。不工作。以上是关于无法在 jQuery 中使用颜色框的主要内容，如果未能解决你的问题，请参考以下文章
设置后如何使用 jQuery 更改 :-moz-placeholder 颜色？
使用 jQuery 尝试更改文本框的背景颜色但在 wordpress 中不起作用