javascript - 加载 jQuery UISlider 时显示默认值

标签 javascript jquery css jquery-ui

JSFIDDLE DEMO

我不知道如何去做以下这些事情:

  1. 加载时显示默认元素。目前,它加载一个空白页面并仅在我拖动 slider 时显示数据。
  2. 加载元素时显示淡入淡出效果。

这是 HTML

<div class="sli3"></div>
<div class="div-0">
  <div class="div-1"></div>
  <div class="div-2"></div>
  <div class="div-3"></div>
</div>

CSS:

.div-0 {
  position: relative;
}
.div-1 {
  position:absolute;
  top:150px;
  left:150px;
}
.div-2 {
  position:absolute;
  top:100px;
  left:60px;
}
.div-3 {
  position:absolute;
  top:210px;
  left:260px;
}

JS:

$(function() {
    $(".sli3").slider({
            animate: true,
        range: "min",
        value: 10,
        min: 0,
        max: 100,
        slide: function(event, ui) {
            if (ui.value<=20) {
               $(".div-1").text("whatever");
               $(".div-2").html("hello <strong>world</strong>");
               $(".div-3").text("");
            }
            else if (ui.value>=21 && ui.value<50) {
               $(".div-1").text("yay");
               $(".div-2").text("whoo");
               $(".div-3").text("");
            }
            else if (ui.value>=50 && ui.value<70) {
               $(".div-1").text("star");
               $(".div-2").text("wars");
               $(".div-3").text("");
            }
            else if (ui.value>=70 && ui.value<90) {
               $(".div-1").text("night");
               $(".div-2").text("crawler");
               $(".div-3").text("rocks");
            }
            else {
               $(".div-1").text("example text 1");
               $(".div-2").text("example text 2");
               $(".div-3").text("");
            }
        }
    });
});

我该怎么做?

最佳答案

对您的代码进行一些更改:

$(function() {
    $(".sli3").slider({
        animate: true,
        range: "min",
        min: 0,
        max: 100,
        slide: onSlide,
        change: onSlide
    }).slider('value', 10);
});

(我取出了 slide 函数,这样我就可以在更改和滑动时调用它)。

检查您的演示更新:
https://jsfiddle.net/m7uhdsy9/1/

关于javascript - 加载 jQuery UISlider 时显示默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43829811/

相关文章:

javascript - 为多个表格行重用单个 HTML 选择/下拉列表?

php - 将 3 个盒子排成一行

css - 最后一个 child 选择器

javascript - 使用来自 golang 的数据将元素添加到 html 页面

javascript - 创建可折叠的侧边菜单

javascript - 通过 AJAX 无形式上传图像

javascript - 如何使用Jquery搜索元素

c# - ASP.Net MVC : How can I easily change the tab color of my navigation menu based on the tab that I'm on?

javascript - 乘以 100 后的值错误

javascript - 全屏上的 HTML5 视频使用 jquery/javascript 旋转屏幕,就像在移动设备中的 YouTube 上一样?