javascript - 使用单选按钮更新 slider 和文本框的年\月计数

Question

这是我当前的设置。

1. 2 个单选按钮，用于选择年份或月份
2. 2 个 slider ，一个用于年份，另一个用于月份
3. 将显示 slider 值的文本框

使用 onclick 单选功能，我仅显示一个 slider ，具体取决于年\月的选择。

当我在年份和月份之间更改选项时，我想相应地更新 slider 和文本框值。例如，如果年份 slider 位于 15 年，当我将单选按钮更改为月份时， slider 应移动到 180 (15*12)，文本框应更新为 180。截至目前，我可以根据单选选择显示\隐藏 slider ，并使用 slider 值更新文本框。但该值并未在年份和月份之间进行转换。

我怎样才能实现这个目标？

fiddle :https://jsfiddle.net/anoopcr/vvemxcL3/

下面是我当前的代码:

HTML:

<div class="inputQ">
  <div class="InputQuest">Loan Tenure</div>
  <div><input id="tentext" class="textbox"></div>

   <div class="switch-field">
      <div class="switch-title"></div>
      <input type="radio" id="switch_left" name="switch_2" value="yes" onclick="javascript:yesnoCheck();" checked/>
      <label for="switch_left">Yr</label>
      <input type="radio" id="switch_right" name="switch_2" value="no" onclick="javascript:yesnoCheck();" />
      <label for="switch_right">Mo</label>
    </div>

</div>


<div class="MarkWrap1" id="MarkWrap1">  
<div id="tenslidery" class="tenslidery"></div>


    <div class="T">0</div>
    <div class="T">5</div>
    <div class="T">10</div>
    <div class="T">15</div>
    <div class="T">20</div>
    <div class="T">25</div>
    <div class="T">30</div>
  </div>

 <div class="MarkWrap2" id="MarkWrap2"> 
<div id="tensliderm" class="tensliderm"></div>


    <div class="Tm">0</div>
    <div class="Tm">60</div>
    <div class="Tm">120</div>
    <div class="Tm">180</div>
    <div class="Tm">240</div>
    <div class="Tm">300</div>
    <div class="Tm">360</div>
  </div> 

Jquery:

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



    });



$("#tentext").on("keyup",function(e){

     $("#tenslidery").slider("value",this.value);
});

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



    });



$("#tentext").on("keyup",function(e){

     $("#tensliderm").slider("value",this.value);
});


function yesnoCheck() {
    if (document.getElementById('switch_left').checked) {
        document.getElementById('MarkWrap1').style.display = 'flex';
        document.getElementById('MarkWrap2').style.display = 'none';


    }
    else if (document.getElementById('switch_right').checked) {


    document.getElementById('MarkWrap2').style.display = 'flex';
         document.getElementById('MarkWrap1').style.display = 'none';

}
}

CSS:

.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;
}

Answer 1

我只是显式计算值并提交到 slider 和输入框，应该可以解决您的问题

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);
  }
}

参见https://jsfiddle.net/kevinkassimo/ayhenhL5/8/