- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想转换复选框列表,如下面的屏幕截图
我希望它变成
以下是 HTML 代码片段:
latex 气球的颜色
这是我到目前为止编写的代码,但似乎无法让它工作。
(函数() { var uploadUrl = ' https://cdn.test.com/s/files/1/2642/9394/files/ ';
$.each($('[data-option-name="color-of-latex-balloons"] select'), function() { //使元素成为“选择”(注意:这与所需的下拉列表尚不完全兼容) var $placeholder = $(this).find('input[value=""]'); if ($placeholder.length > 0) { $(this).attr('数据占位符', $placeholder.text()); $placeholder.text(''); }
$(this).chosen({ width: '100%' }).on('chosen:showing_dropdown', function(e) {
// display swatches in dropdown
var $select = $(this);
var $chosenElement = $(e.currentTarget.nextSibling);
$.each($chosenElement.find('li'), function() {
var colorName = $select.find('input').eq($(this).data('value')).val();
var colorUrl = uploadUrl + colorName.toLowerCase().replace(/ /g, '-') + '.jpg';
$(this).prepend('<span style="display: inline-block; width: 15px; margin-right: 10px; background-image: url(\'' + colorUrl + '\');"> </span>');
});
}).on('change', function(e, params) {
// set the swatch when an option is chosen
var $chosenElement = $(e.currentTarget.nextSibling);
var colorName = params.selected;
var colorUrl = uploadUrl + colorName.toLowerCase().replace(/ /g, '-') + '.jpg';
$chosenElement.find('.chosen-single span').prepend('<span style="display: inline-block; width: 15px; height: 15px; margin-bottom: -3px; margin-right: 10px; background-image: url(\'' + colorUrl + '\');"> </span>');
});
});})();
如果有任何帮助,我将不胜感激。
最佳答案
首先,您需要创建一个带有标签或任何其他标记(例如 span)的复选框列表,并将其添加到文档的一部分,您可以根据使用情况使用 jQuery 运行该部分。将复选框和标签列表添加到页面后。归根结底是使用为标签提供的类来设置每个标签的气球图像,因此您需要从页面中隐藏整个复选框。
.ballon-checkbox-list input[type="checkbox"] {
display: none;
}
此后,有必要在与指定的具有不同样式的属性相对应的标签中选中复选框,以便用户通过简单的欢呼就知道他选择了哪个气球来执行此操作。曾经是。此示例不使用图像,但仅当图像 URL 的位置正确时,图像才会以彩色呈现。
let balloonListData = [{
color: "gray"
},
{
color: "golden"
},
{
color: "red"
},
{
color: "green"
}
];
let checkBoxList = document.getElementById("balloon_checkbox_list");
for (let balloon of balloonListData) {
let className = "balloon-color--" + balloon.color;
let checkboxId = balloon.color + "-balloon";
let checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = checkboxId;
let label = document.createElement("label");
label.htmlFor = checkboxId;
label.className = className;
checkBoxList.appendChild(checkbox);
checkBoxList.appendChild(label);
}
.balloon-checkbox-list input[type="checkbox"] {
display: none;
}
.balloon-checkbox-list input[type="checkbox"]:checked + label {
box-shadow: 0 0 0 5px #03a9f4;
}
.balloon-checkbox-list label {
height: 34px;
width: 28px;
display: inline-block;
margin: 8px;
border-radius: 5px;
}
.balloon-color--gray {
background-color: gray;
/* Use the actual balloon image URL.
background-image: url(images/gray-balloon.png);
*/
}
.balloon-color--golden {
background-color: yellow;
/* Use the actual balloon image URL.
background-image: url(images/golden-balloon.png);
*/
}
.balloon-color--red {
background-color: red;
/* Use the actual balloon image URL.
background-image: url(images/red-balloon.png);
*/
}
.balloon-color--green {
background-color: green;
/* Use the actual balloon image URL.
background-image: url(images/green-balloon.png);
*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>Choose balloon colors*</h1>
<div class="balloon-checkbox-list" id="balloon_checkbox_list"></div>
</body>
</html>
关于javascript - 将复选框方形选项更改为图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58830401/
给定一个 Option[Future[Option[Int]]] : scala> val x: Option[Future[Option[Int]]] = Some ( Future ( Some
如果我理解正确,EitherT[Option,A,B] 应该与 Option[Either[A,B]] 相同,但编译器不同意.以下代码编译失败: def f[A,B] = implicitly[Eit
我刚开始在使用 parcel.js 构建静态 Assets 时遇到此错误。它在本地工作,但我在 Heroku 上的构建出错,我不确定它是否相关。 最佳答案 得到同样的问题。通过将 core-js 安装
当我生成 Telerik Report 时,只有 Export PDF 可用。即使我将 docx 和 xlsx 的配置设置为 true。这是我在网络配置中的配置。
我的 iTunesConnect 应用程序显示 Apple Pay 选项。我正在使用布伦特里。 即使我们没有在应用程序中使用 Apple Pay 功能。 有人可以帮我解决如何在我的 itunesCon
我正在 Raspbian 中从命令行运行以下查询: mysql -u $NAME -p $PASS Tweets -e "SELECT count(*) FROM raw_tweets;" 它输出以下
我正在尝试使用 ffmpeg(在 linux 下)为视频添加一个小标题。所以,我使用: ffmpeg -i hk.avi -r 30000/1001 -metadata title="SOF" hk_
我正在尝试使用 ffmpeg 使用 ffserver 流式传输视频。您将在 ffserver1.conf 文件下方找到 ffmpeg 命令的日志输出。 其中一个错误引用了预设,每次我尝试使用预设时,我
我正在尝试对 Option 使用 fold 或 map 操作而不是 match。 我有一个选项 val ao: Option[String] = xxxx 和一个函数 f: (String => Fu
Dockerfile documentation表示有可能通过 --platform FROM 中的选项像这样的指令: FROM [--platform=] [AS ] 在我的 dockerfile
我不确定“属性(property)”或“选项”是否是正确的术语,但这是我需要弄清楚的。 鉴于以下情况: ' $.fileup({ url: '/file/upload',
我正在尝试使用 jQuery 检查是否选择了值 = 1 的选择选项,然后将类添加到某些元素。但有些东西不起作用。可以请人看一下代码吗? 我的代码: Reservation
我对 VIM 中的这些感到困惑。有些事情需要设置,而另一些则让。 而且,我如何检查某个选项。我知道这是一个选项,因为我使用 set 来更改它。 例如,如何检查当前文件类型选项是否为 java? 最佳答
关闭。这个问题需要多问focused 。目前不接受答案。 想要改进此问题吗?更新问题,使其仅关注一个问题 editing this post . 已关闭 8 年前。 Improve this ques
我在看《Professional F# 2.0》一书作者展示如下代码 let a string : option = None if a.IsNone then System.Console.
我习惯使用方法顶部的 java 样板检查输入参数: public static Boolean filesExist(String file1, String file2, String file3
假设我有一串 "Insert Post -title Some PostTitle -category 2 -date-posted 2013-02:02 10:10:10" 我一直在尝试做的是将这个
从 1.3.70 EAP 开始,在 org.jetbrains.kotlin.gradle.dsl.KotlinJvmOptions 这是 var useIR: kotlin.Boolean 哪个激活
我无法获取订购捆绑商品的所有子产品及其选项。这可能吗? 最佳答案 以下是您如何找出哪些产品应与所有其他项目一起附加到列表中的捆绑产品中的方法: foreach ($order->getAllItems
这个问题不太可能对任何 future 的访客有帮助;它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关,通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用,visit the
我是一名优秀的程序员,十分优秀!