Javascript 使用单选按钮使用年\月计数更新滑块和文本框

这是我目前的设置

2选择年份或月份的单选按钮

2个滑块，一个用于年，另一个用于月

显示滑块值的文本框

使用onclick radio功能，我仅显示一个滑块，具体取决于年份\月份选择

当我在年和月之间更改选项时，我希望相应地更新滑块和文本框值。例如，如果年份滑块位于第15年，当我将单选按钮更改为月份时，滑块应移动到180（15*12），文本框应更新为180。 现在，我可以根据收音机选择显示\隐藏滑块，并使用滑块值更新文本框。但该值不会在年和月之间转换

我怎样才能做到这一点

小提琴：

以下是我目前的代码：

HTML:

CSS:

---

就像整理和增加可读性一样

这将使滑块和输入始终保持同步，因此如果您需要在其他位置获取任何当前值，它将是正确的

var yearVal;
var monthVal;
var yearSelected;

configure();

function updateVal(val) {
  yearVal = yearSelected ? val : val / 12;
  monthVal = yearSelected ? val * 12 : val;
}

function switchSliders() {
  document.getElementById('MarkWrap1').style.display = yearSelected ? 'flex' : 'none';
  document.getElementById('MarkWrap2').style.display = yearSelected ? 'none' : 'flex';
}

function updateSliders() {
  $("#tenslidery").slider("value", yearVal);
  $("#tensliderm").slider("value", monthVal);
}

function updateTenure() {
  $("#tentext").val(yearSelected ? yearVal : monthVal);
}

function yesnoCheck() {
  yearSelected = document.getElementById('switch_left').checked;
  updateTenure();
  switchSliders();
  updateSliders();
}

function configure() {
  $("#tenslidery").slider({
    orientation: "horizontal",
    range: false,
    min: 0,
    max: 30,
    value: 0,
    step: .1,
    animate: true,
    range: 'min',
    slide: function (event, ui) {
      updateVal(ui.value);
      $("#tentext").val(ui.value);
    }
  });

  $("#tensliderm").slider({
    orientation: "horizontal",
    range: false,
    min: 0,
    max: 360,
    value: 0,
    step: 1,
    animate: true,
    range: 'min',
    slide: function (event, ui) {
      updateVal(ui.value);
      $("#tentext").val(ui.value);
    }
  });

  $("#tentext").on("keyup", function (e) {
    updateVal(Number(this.value));
    updateSliders();
  });

  yearVal = 20;
  monthVal = yearVal * 12;
  yearSelected = true;
  $("#tentext").val(yearVal);
  updateSliders();
}

---

我只需显式地计算值并提交到滑块和输入框，就可以解决您的问题

function yesnoCheck() {
  var markWrap1 = $('#MarkWrap1');
  var markWrap2 = $('#MarkWrap2');
  var text = $('#tentext');
  var value;
  if ($('#switch_left').is(':checked')) {
    markWrap1.css('display', 'flex');
    markWrap2.css('display', 'none');
    value = +$('#tensliderm').slider("option", "value") / 12;
    text.val(String(value));
    $('#tenslidery').slider('value', value);
  } else if ($('#switch_right').is(':checked')) {
    markWrap2.css('display', 'flex');
    markWrap1.css('display', 'none');
    value = +$('#tenslidery').slider("option", "value") * 12;
    text.val(String(value));
    $('#tensliderm').slider('value', value);
  }
}

看

.tenslidery {
   height:8px;
  flex-basis:100%;
  margin:0 calc((100% / 7) / 2);
}

.T {
   font-size: 11px;
   font-family:verdana;
  margin-top:15px;
  flex:1;
  text-align:center;
  position:relative;
}
.T:before {
   content:"";
  position:absolute;
  height:15px;
  bottom:100%;
  width:1px;
  left:calc(50% - 1px);
  background:#c5c5c5;
}

.MarkWrap1 {
  width:83%; /*Adjust this to adjust the width*/
  margin: auto;
  display:flex;
  flex-wrap:wrap;


}

.Tm {
   font-size: 11px;
   font-family:verdana;
  margin-top:15px;
  flex:1;
  text-align:center;
  position:relative;
}
.Tm:before {
   content:"";
  position:absolute;
  height:15px;
  bottom:100%;
  width:1px;
  left:calc(50% - 1px);
  background:#c5c5c5;
}

.MarkWrap2 {
  width:83%; /*Adjust this to adjust the width*/
  margin: auto;
  display:none;
  flex-wrap:wrap;


}

.tensliderm {
   height:8px;
  flex-basis:100%;
  margin:0 calc((100% / 7) / 2);
}

.switch-field {
  font-family: "Lucida Grande", Tahoma, Verdana, sans-serif;

    overflow: hidden;

    width:auto;
}



.switch-field input {
    position: absolute !important;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    border: 0;
    overflow: hidden;
}

.switch-field label {
  float: left;
}

label[for=switch_right]
{


  border:1px solid #ccc;
  border-radius:4px;
  border-top-left-radius:0px;
  border-bottom-left-radius:0px;

}

label[for=switch_left]
{


  border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;



}



.switch-field label {
  display: inline-block;
  width: 35px;
  background-color: #eee;
  color: black;
  font-size: 18px;
  font-weight: normal;
  text-align: center;
  text-shadow: none;
height:25.4px;
line-height:1.4;
padding:2px;
   cursor: pointer;
}


.switch-field label switch-right ( background:red;)
.switch-field label:hover {
    cursor: pointer;
}

.switch-field input:checked + label {
  background-color: deeppink;
  -webkit-box-shadow: none;
  box-shadow: none;
}

var yearVal;
var monthVal;
var yearSelected;

configure();

function updateVal(val) {
  yearVal = yearSelected ? val : val / 12;
  monthVal = yearSelected ? val * 12 : val;
}

function switchSliders() {
  document.getElementById('MarkWrap1').style.display = yearSelected ? 'flex' : 'none';
  document.getElementById('MarkWrap2').style.display = yearSelected ? 'none' : 'flex';
}

function updateSliders() {
  $("#tenslidery").slider("value", yearVal);
  $("#tensliderm").slider("value", monthVal);
}

function updateTenure() {
  $("#tentext").val(yearSelected ? yearVal : monthVal);
}

function yesnoCheck() {
  yearSelected = document.getElementById('switch_left').checked;
  updateTenure();
  switchSliders();
  updateSliders();
}

function configure() {
  $("#tenslidery").slider({
    orientation: "horizontal",
    range: false,
    min: 0,
    max: 30,
    value: 0,
    step: .1,
    animate: true,
    range: 'min',
    slide: function (event, ui) {
      updateVal(ui.value);
      $("#tentext").val(ui.value);
    }
  });

  $("#tensliderm").slider({
    orientation: "horizontal",
    range: false,
    min: 0,
    max: 360,
    value: 0,
    step: 1,
    animate: true,
    range: 'min',
    slide: function (event, ui) {
      updateVal(ui.value);
      $("#tentext").val(ui.value);
    }
  });

  $("#tentext").on("keyup", function (e) {
    updateVal(Number(this.value));
    updateSliders();
  });

  yearVal = 20;
  monthVal = yearVal * 12;
  yearSelected = true;
  $("#tentext").val(yearVal);
  updateSliders();
}

function yesnoCheck() {
  var markWrap1 = $('#MarkWrap1');
  var markWrap2 = $('#MarkWrap2');
  var text = $('#tentext');
  var value;
  if ($('#switch_left').is(':checked')) {
    markWrap1.css('display', 'flex');
    markWrap2.css('display', 'none');
    value = +$('#tensliderm').slider("option", "value") / 12;
    text.val(String(value));
    $('#tenslidery').slider('value', value);
  } else if ($('#switch_right').is(':checked')) {
    markWrap2.css('display', 'flex');
    markWrap1.css('display', 'none');
    value = +$('#tenslidery').slider("option", "value") * 12;
    text.val(String(value));
    $('#tensliderm').slider('value', value);
  }
}