如何解决带有输入类型范围问题的甜蜜警报 2 模态
有没有办法自定义显示输入值的输入（类型范围）旁边的输出？ 我希望它显示值 + %。
到目前为止我尝试的是给输入一个自定义类，然后获取它的 <output> 标签并尝试像这样操作它的内部文本：
$(document).on('input','input',function () {
$(".customSwal output").text( $(".customSwal").val() + " %" )
});
没有特别成功
$(document).ready(function(){
Swal.fire({
icon: 'question',showCancelButton:'true',cancelButtonColor: '#d33',title: 'Test',text: 'Test',input: 'range',width: '25rem',inputAttributes: {
min: 0,max: 100,step: 1,},inputValue: 0,customClass: {
input: 'customSwal',}
})
});
//$(document).on('input',function () {
//$(".customSwal output").text( $(".customSwal").val() + " %" )
//});<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>
<body>
</body>
</html>解决方法
您可以使用 GraphQl 更改 $(".customSwal output").text($(this).val() + " %") 元素的值。此外，您还需要在处理程序中使用 output 事件。
演示代码：
change$(document).ready(function() {
Swal.fire({
icon: 'question',showCancelButton: 'true',cancelButtonColor: '#d33',title: 'Test',text: 'Test',input: 'range',width: '25rem',inputAttributes: {
min: 0,max: 100,step: 1,},inputValue: 0,customClass: {
input: 'customSwal',}
})
//on load
$(".customSwal output").text("0 %")
});
///when change occur
$(document).on('input change','input[type=range]',function() {
//get input value
$(".customSwal output").text($(this).val() + " %")
});您可以通过简单地添加此 CSS 将 % 字符添加到范围的输出中：
Swal.fire({
input: 'range',inputAttributes: {
min: 0,inputValue: 25
}).swal2-range output::after {
content: '%';
}<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。