让脚本在没有 .text 的情况下工作

Getting a script to work without .text

本文关键字：情况下 工作 text 脚本      更新时间：2023-09-26

我正在开发一个基于示例的脚本。在他们使用的示例中：

$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

以使价格显示在绿色滑块中。我想将价格添加到budgetAmount，我完成了这项工作，并将文本"BUDGET"放在价格位置。但是，在执行此操作时，滑动条不再滑动到所选点。

要查看原始效果，请像这样注释掉代码：

//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
        $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
        //$("#sliderInterval").text("BUDGET")
        //$("#budgetAmount").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

基本上，我无法弄清楚将以下代码更改为什么以允许绿色条在所选点处滑动。

$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)

另外，您会注意到您必须直接单击圆点才能使其滑动。有没有办法让周围区域也变得可点击？

 $(function() {
  var ranges = [{
    lower: 500,
    upper: 1000
  }, {
    lower: 1100,
    upper: 2000
  }, {
    lower: 2100,
    upper: 5000
  }, {
    lower: 5100,
    upper: 10000
  }, {
    lower: 11000,
    upper: 20000
  }, {
    lower: 21000,
    upper: 50000
  }, ];
  var wslider = $("#sliderBar").width() / (ranges.length);
  for (var i = 0; i < ranges.length; i++) {
    var range = $('<div class="intervalCircle">');
    var left = (100 / (ranges.length) * (i + 0.5));
    left = "calc(" + left + "% - 8px)";
    range.css("left", left);
    range.on("click", function(idx) {
      return function() {
        var sliderleft = wslider * idx;
		//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		//*** HERE ***            $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		$("#sliderInterval").text("BUDGET")
		$("#budgetAmount").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
          .animate({
            left: sliderleft - 2
          });
      };
    }(i));
    $("#sliderBar").append(range);
    $("#sliderInterval").css("width", wslider + "px");
  }
});
#sliderBar {
  border-radius: 15px;
  width: 90%;
  height: 30px;
  margin: 30px 10%;
  background: #454343;
  position: relative;
  overflow: hidden;
}
.intervalCircle {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background: red;
  z-index: 1;
  position: absolute;
  margin-top: 10px;
  cursor: pointer;
}
.intervalCircle:hover {
  
}
.rangeSection.active{
  background-color: green;
  z-index: 3;
}
.sliderInterval:first-child {
  padding-left: 0%;
}
.intervalCircle:first-child {
  padding-left: 0;
}
#sliderInterval {
  height: 100%;
  border-radius: 15px;
  position: absolute;
  text-align: center;
  z-index: 999;
  color: #FFF;
  background-color: green;
}
#budgetAmount {
	font-size: 1.5em;
	color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
	<div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>

您必须使用"预算"移动行，以便它可以调用动画函数

$("#sliderInterval").text("BUDGET").animate({
            left: sliderleft - 2
          });

通过这种方式，它可以移动。

使预算看起来像$ 1，000- $ 2，000 

$("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/'B(?=('d{3})+(?!'d))/g, ","));

来源：答案

$(function() {
  var ranges = [{
    lower: 500,
    upper: 1000
  }, {
    lower: 1100,
    upper: 2000
  }, {
    lower: 2100,
    upper: 5000
  }, {
    lower: 5100,
    upper: 10000
  }, {
    lower: 11000,
    upper: 20000
  }, {
    lower: 21000,
    upper: 50000
  }, ];
  var wslider = $("#sliderBar").width() / (ranges.length);
  for (var i = 0; i < ranges.length; i++) {
    var range = $('<div class="intervalCircle">');
    var left = (100 / (ranges.length) * (i + 0.5));
    left = "calc(" + left + "% - 8px)";
    range.css("left", left);
    range.on("click", function(idx) {
      return function() {
        var sliderleft = wslider * idx;
		//$("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		//*** HERE ***            $("#sliderInterval").text("$" + ranges[idx].lower + " - " + "$" + ranges[idx].upper)
		
		$("#budgetAmount").text("$" + ranges[idx].lower.toString().replace(/'B(?=('d{3})+(?!'d))/g, ",") + " - " + "$" + ranges[idx].upper.toString().replace(/'B(?=('d{3})+(?!'d))/g, ","));
          $("#sliderInterval").text("BUDGET").animate({
            left: sliderleft - 2
          });
      };
    }(i));
    $("#sliderBar").append(range);
    $("#sliderInterval").css("width", wslider + "px");
  }
});
#sliderBar {
  border-radius: 15px;
  width: 90%;
  height: 30px;
  margin: 30px 10%;
  background: #454343;
  position: relative;
  overflow: hidden;
}
.intervalCircle {
  border-radius: 50%;
  height: 10px;
  width: 10px;
  background: red;
  z-index: 1;
  position: absolute;
  margin-top: 10px;
  cursor: pointer;
}
.intervalCircle:hover {
  
}
.rangeSection.active{
  background-color: green;
  z-index: 3;
}
.sliderInterval:first-child {
  padding-left: 0%;
}
.intervalCircle:first-child {
  padding-left: 0;
}
#sliderInterval {
  height: 100%;
  border-radius: 15px;
  position: absolute;
  text-align: center;
  z-index: 999;
  color: #FFF;
  background-color: green;
}
#budgetAmount {
	font-size: 1.5em;
	color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sliderBar">
	<div id="sliderInterval"></div>
</div>
<div id="budgetAmount"></div>

相关文章：