javascript - 使用 arctext jquery 插件使用范围标签创建动态文本弧

Question

我喜欢动态创建 arctext，所以我使用了 arctext jquery 插件，并使用了 range html 标签来选择文本中的弧或曲线。

这是我的html代码

<label>Curve:</label>
<input type="range" name="value" id="value" min="-100" max="100" value="0" />
<p  id="textvalue"> I wanna to be curve</p> 

javascript代码：

<script type="text/javascript">
$(function(){
  $("#value").change(function () {
    var newValue = $('#value').val();
    changetext(newValue);
  });
  function changetext(newValue){
    console.log(newValue);
    var pos;
    if(newValue>0)
      pos=1;
    else{
      pos=-1;
      $("#textvalue").hide();
      $("#textvalue").show().arctext({radius:newValue, dir: pos});
    }
  }
});
</script>

但是此代码适用于第一次拖动。但后来它保持不变。范围值不断变化，我通过 console.log 了解到这一点。

Answer 1

我认为你的意思是在 if 语句的大括号之外有 $("textvalue").hide() 东西。滑块也变为负数，文本仅采用正值。我看了一下这个，我能让它工作的唯一方法是完全移除元素并用不同的半径替换它，所以，

$(function(){
$("#value").change(function () {
 var newValue = $('#value').val();
 changetext(newValue);
});
function changetext(newValue){
  console.log(newValue);
  var pos;
  if(newValue>0)
   pos=1;
  else{
   pos=-1;
  }
  var text = $("#textvalue").text();
  $("#textvalue").remove();
  $('body').append('<p id="textvalue">'+ text +'</p>');
  $("#textvalue").arctext({radius:Math.abs(newValue), dir: pos});
 }
});