gpt4 book ai didi

jquery - Bootstrap colorpicker 基本示例不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 14:26:10 25 4
gpt4 key购买 nike

我想使用颜色选择器插件进行 Bootstrap :https://farbelous.io/bootstrap-colorpicker/index.html

它使用 bootstrap 4 和 Jquery

当尝试开发人员在我的网站或 JS Fiddle 中发布的非常基本的代码示例时,颜色选择器无法正常工作(您应该在左侧看到一个可点击的方 block ,并且能够使用它)

JsFiddle

我做错了什么?我认为可能是导入不起作用,所以我使用了 CDN,但它没有改变任何东西

JsFiddle

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<h1>Bootstrap Colorpicker Demo</h1>
<input id="demo" type="text" class="form-control" value="rgb(255, 128, 0)" />
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
<script>
$(function () {
// Basic instantiation:
$('#demo').colorpicker();

// Example using an event, to change the color of the .jumbotron background:
$('#demo').on('colorpickerChange', function(event) {
$('.jumbotron').css('background-color', event.color.toString());
});
});
</script>
</body>

最佳答案

这是您的代码的固定版本:Fixed version.

从 CDN 加载 jQuery 时出现问题。

Chrome 返回错误:

Failed to load resource: the server responded with a status of 404.

所以我重新添加了 CDN,一切正常。

关于jquery - Bootstrap colorpicker 基本示例不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51857642/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com