Question

这是我当前的设置。

2单选按钮，选择年份或月份
2个滑块，一个用于一年，另一个用于一个月
将显示滑块值

使用onclick收音机功能，我只显示一个滑块取决于年/月选择。

当我在年和月之间更改选项时，我想相应地更新滑块和文本框值。例如，如果年份滑块在第15年，当我将单选按钮更改为月份时，滑块应移至180（15 * 12），文本框应更新为180。截至目前，我能够显示\隐藏滑块取决于无线电选择并使用滑块值更新文本框。但是这个值在年和月之间没有转换。

我怎样才能做到这一点？

小提琴：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

我只是明确地计算了值并提交给滑块和输入框，应该解决你的问题

git add -f <file>

请参阅https://jsfiddle.net/kevinkassimo/ayhenhL5/8/

Answer 2

就像整理一样，增加可读性......

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

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

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

2 个答案: