javascript - 链接两个表单输入以相对于彼此动态更新-6ren

javascript - 链接两个表单输入以相对于彼此动态更新

转载作者：可可西里更新时间：2023-11-01 13:06:42

刚刚学习 Javascript，所以请善待

背景:基于 Bootstrap 的站点，带有联系表单，我想使用 html5 input type="range" 元素。在 codepen ( original here ) 上找到了一个使用 modernizr 的美化版本，基本上只是根据我的要求更新了 CSS 样式。

我需要 slider 相对于下拉菜单进行“更新”，并编写了一个基本的 javascript 函数来实现这一点(有点)。请参见下面的代码。

问题:“原始” slider 功能(在拖动时更新“工具提示”样式值)仍然存在。使用我自己的 javascript 函数，我可以使用下拉菜单更改范围值，但不会更新 -ms-fill-lower 或工具提示值。

原始的javascript有点超出我目前的能力；我不太确定我应该尝试用自己的函数等更新什么值。我认为这可能与输入元素焦点有关，但如果有人可以指出我如何定位/链接的正确方向正确的值/元素来创建所需的结果，以便在从下拉菜单中选择所需的值时范围 slider “正确更新”我将不胜感激!

//ORIGINAL SLIDER JAVASCRIPT

var range_el = document.querySelector('input[type=range]'),
  style_el = document.createElement('style'),
  range_style = getComputedStyle(range_el),
  pad = range_style.paddingTop.split('px')[0],
  w = range_style.width.split('px')[0],
  fill_max_w = w - 2 * pad,
  messages = [
    'Making an enquiry',
    'Not sure its for me',
    'Want to know more',
    'Very interested',
    'I want to do this',
    'Ready to Start',
  ];

document.body.appendChild(style_el);

range_el.addEventListener('input', function() {
  var perc = this.value,
    dec = perc / 100,
    fill_w = Math.round(dec * fill_max_w),
    msg = messages[0];

  for (var i = 0; i < 4; i++) {
    if (perc > i * 25 && i <= (i + 1) * 25) {
      msg = messages[(perc == 100) ? 5 : ((perc == 50) ? 6 : (i + 1))];
    }
  }

  style_el.textContent =
    '.js input[type=range]::-webkit-slider-runnable-track:before,' +
    '.js input[type=range] /deep/ #track:before{width:' + fill_w + 'px}' +
    '.js input[type=range]::-webkit-slider-thumb:before,' +
    '.js input[type=range] /deep/ #thumb:before{content:"' + perc + '%"}' +
    '.js input[type=range]::-webkit-slider-thumb:after,' +
    '.js input[type=range] /deep/ #thumb:after{content:"' + msg + '"}';
}, false);

//MY JAVASCRIPT FUNCTION

function changeValueMobile() {
  var option = document.getElementById('commitmentmobile').value;

  if (option == "Ready to Start") {
    document.getElementById('commitmentdesktop').value = 100;
  } else if (option == "I want to do this") {
    document.getElementById('commitmentdesktop').value = 80;
  } else if (option == "Very interested") {
    document.getElementById('commitmentdesktop').value = 60;
  } else if (option == "I want to know more") {
    document.getElementById('commitmentdesktop').value = 40;
  } else if (option == "Not sure this is right for me") {
    document.getElementById('commitmentdesktop').value = 20;
  } else if (option == "Just making an enquiry") {
    document.getElementById('commitmentdesktop').value = 0;
  }
}

/*CSS STYLES */
input[type='range'] {
  position: relative;
  margin: 100px auto 20px auto;
  padding: 0.75em 0 0.25em 0;
  max-width: 28em;
  width: 90%;
  height: 3em;
  opacity: .75;
  background: transparent;
  font-size: 1em;
  cursor: pointer;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
}
input[type='range']::-webkit-slider-runnable-track {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  width: 300px;
  height: 1.5em;
  border-radius: 0.75em;
  box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
  background: #ccc;
}
input[type='range']::-moz-range-track {
  box-sizing: border-box;
  padding: 0.25em;
  width: 28em;
  height: 1.5em;
  border-radius: 0.75em;
  box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
  background: #ccc;
}
input[type='range']::-ms-track {
  border: none;
  box-sizing: border-box;
  padding: 0.25em;
  width: 28em;
  height: 1.5em;
  border-radius: 0.75em;
  box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
  background: #ccc;
  color: transparent;
}
input[type='range']::-moz-range-progress {
  box-sizing: border-box;
  border-left: solid 0.25em transparent;
  height: 1em;
  border-radius: 0.5em 0.1875em 0.1875em 0.5em / 50%;
  box-shadow: inset 0 -1px 1px #09313d, inset 0 1px 1px #c0edf3;
  background: #e12726;
  background-clip: padding-box;
  border-radius: 0.75em 0.1875em 0.1875em 0.75em / 50%;
  background-clip: padding-box;
}
input[type='range']::-ms-fill-lower {
  height: 1em;
  border-radius: 0.5em 0.1875em 0.1875em 0.5em / 50%;
  box-shadow: inset 0 -1px 1px #09313d, inset 0 1px 1px #c0edf3;
  background: #e12726;
  background-clip: padding-box;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  margin-top: -0.375em;
  box-sizing: border-box;
  border: solid 0.125em rgba(33, 33, 33, 0.5);
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  box-shadow: 0 .125em .125em #3b4547;
  background: $brandbasic;
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: 100% .125em, .125em 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 115% 115%;
  filter: drop-shadow(0 1px #516570);
}
input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  border: solid 0.125em rgba(33, 33, 33, 0.5);
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  box-shadow: 0 .125em .125em #3b4547;
  background: radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(at 50% 0 at 50% 0, #777777, rgba(119, 119, 119, 0) 71%) 50% 0, radial-gradient(at 50% 100% at 50% 100%, #777777, rgba(119, 119, 119, 0) 71%) 50% 100%, radial-gradient(at 0 50% at 0 50%, #777777, rgba(119, 119, 119, 0) 71%) 0 50%, radial-gradient(at 100% 50% at 100% 50%, #777777, rgba(119, 119, 119, 0) 71%) 100% 50%, radial-gradient(rgba(59, 69, 71, 0) 50%, #3b4547 71%) 50% -0.25em #fff;
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: 100% .125em, .125em 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 115% 115%;
}
input[type='range']::-ms-thumb {
  box-sizing: border-box;
  border: solid 0.125em rgba(33, 33, 33, 0.5);
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  box-shadow: 0 .125em .125em #3b4547;
  background: radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(at 50% 0 at 50% 0, #777777, rgba(119, 119, 119, 0) 71%) 50% 0, radial-gradient(at 50% 100% at 50% 100%, #777777, rgba(119, 119, 119, 0) 71%) 50% 100%, radial-gradient(at 0 50% at 0 50%, #777777, rgba(119, 119, 119, 0) 71%) 0 50%, radial-gradient(at 100% 50% at 100% 50%, #777777, rgba(119, 119, 119, 0) 71%) 100% 50%, radial-gradient(rgba(59, 69, 71, 0) 50%, #3b4547 71%) 50% -0.25em #fff;
  background-clip: border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: 100% .125em, .125em 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 115% 115%;
}
.js input[type='range']::-webkit-slider-runnable-track:before,
.js input[type='range'] /deep/ #track:before {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 0em;
  height: 1em;
  border-radius: 0.5em 0.1875em 0.1875em 0.5em / 50%;
  box-shadow: inset 0 -1px 1px #09313d, inset 0 1px 1px #c0edf3;
  background: #e12726;
  background-clip: padding-box;
  content: '';
}
.js input[type='range']::-webkit-slider-thumb:before,
.js input[type='range']::-webkit-slider-thumb:after,
.js input[type='range'] /deep/ #thumb:before,
.js input[type='range'] /deep/ #thumb:after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  color: #ebeef3;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(211, 23, 22, 0.5);
}
.js input[type='range']::-webkit-slider-thumb:before,
.js input[type='range'] /deep/ #thumb:before {
  width: 4em;
  height: 2.25em;
  border-radius: 0.125em;
  transform: translate(-50%, -0.5em);
  box-shadow: inset 0 1px 1px #d1e4f9;
  background: #212121;
  clip-path: polygon(2.375em 1.875em, 2em 2.25em, 1.625em 1.875em, 0.125em 1.875em, 0.07716em 1.86548em, 0.03661em 1.83839em, 0.00952em 1.79784em, 0em 1.75em, 0em 0.125em, 0.00952em 0.07716em, 0.03661em 0.03661em, 0.07716em 0.00952em, 0.125em 0em, 3.875em 0em, 3.92284em 0.00952em, 3.96339em 0.03661em, 3.99048em 0.07716em, 4em 0.125em, 4em 1.75em, 3.99048em 1.79784em, 3.96339em 1.83839em, 3.92284em 1.86548em, 3.875em 1.875em);
  font: 2em/1.40625em trebuchet ms, verdana, arial, sans-serif;
  content: "0%";
}
.js input[type='range']::-webkit-slider-thumb:after,
.js input[type='range'] /deep/ #thumb:after {
  width: 9.6em;
  border-radius: 50%;
  transform: translate(-50%, -2.75em);
  box-shadow: 0 2.25em 0.625em -0.5em rgba(55, 84, 92, 0.75);
  font: 0.75em trebuchet ms, verdana, arial, sans-serif;
  white-space: nowrap;
  content: "Making an enquiry";
}
input[type='range']:focus {
  outline: none;
  opacity: .99;
  border: none;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <input type='range' id="commitmentdesktop" class="form-control" name="commitmentdesktop" value='0' step="20">
    <select id="commitmentmobile" name="commitmentmobile" class="form-control smaller-select" onchange="changeValueMobile();">
      <option>&nbsp;</option>
      <option value="Ready to Start">I'm ready to Start</option>
      <option value="I want to do this">I want to do this</option>
      <option value="Very interested">I'm very interested</option>
      <option value="I want to know more">I want to know more</option>
      <option value="Not sure this is right for me">I'm not sure this is right for me</option>
      <option value="Just making an enquiry">Just making an enquiry</option>
    </select>
  </div>
  <!-- /.col-md-12 -->
</div>
<!-- /.row -->

最佳答案

我做了以下更改:

添加了对您的 <SELECT> 的引用元素。
为选择 <OPTIONS> 创建了一个数据数组s.
填充了 <SELECT>使用 JavaScript 的盒子。
将样式元素添加到 <HEAD> . (仅用于 session )
为了保持一致性，删除了 onchange来自您的选择元素。
修复了将所选索引转换为百分比的比例逻辑。

代码

这是一个指向 external JSFiddle 的链接(与下面的代码相同)，但您可以在此页面的此处运行它。

// Reference elements.
var range_el = document.querySelector('input[type=range]'),
    select_el = document.querySelector('select[name=commitmentmobile]'),
    style_el = document.createElement('style');

// Other variables.
var range_style = getComputedStyle(range_el),
    pad = range_style.paddingTop.split('px')[0],
    w = range_style.width.split('px')[0],
    fill_max_w = w - 2 * pad,
    options = [
        { val : 0,   msg : 'Making an enquiry',   text : "Just making an enquiry" },
        { val : 20,  msg : 'Not sure its for me', text : "I'm not sure this is right for me" },
        { val : 40,  msg : 'Want to know more',   text : "I want to know more" },
        { val : 60,  msg : 'Very interested',     text : "I'm very interested" },
        { val : 80,  msg : 'I want to do this',   text : "I want to do this" },
        { val : 100, msg : 'Ready to Start',      text : "I'm ready to Start" }
    ];

// Populate select box.
for (var i = options.length - 1; i >= 0; i--) {
    var option_el = document.createElement('option');
    option_el.value = i;
    option_el.innerHTML = options[i].text;
    select_el.appendChild(option_el);
}

// Add style element to the head.
document.head.appendChild(style_el);

// Event listeners.
range_el.addEventListener('input', function (e) {
    updateSlider();
}, false);

select_el.addEventListener('change', function(e) {
    var option = Number(select_el.value);
    range_el.value = options[option].val;
    updateSlider();
});

// Update function which binds the range slider to the select box.
function updateSlider() {
    var perc = range_el.value,
        step = range_el.step,
        index = Math.floor(perc / step),
        msg = options[index].msg,
        scale = (perc - 1) / 100,
        fill_w = Math.round(scale * fill_max_w);

    style_el.textContent = [
        '.js input[type=range]::-webkit-slider-runnable-track:before,',
        '.js input[type=range] /deep/ #track:before{width:' + fill_w + 'px}',
        '.js input[type=range]::-webkit-slider-thumb:before,',
        '.js input[type=range] /deep/ #thumb:before{content:"' + perc + '%"}',
        '.js input[type=range]::-webkit-slider-thumb:after,',
        '.js input[type=range] /deep/ #thumb:after{content:"' + msg + '"}',
    ].join(' ');
    
    select_el.value = index;
}

input[type='range'] {
    position: relative;
    margin: 100px auto 20px auto;
    padding: 0.75em 0 0.25em 0;
    max-width: 28em;
    width: 90%;
    height: 3em;
    opacity: .75;
    background: transparent;
    font-size: 1em;
    cursor: pointer;
}
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
}
input[type='range']::-webkit-slider-runnable-track {
    position: relative;
    box-sizing: border-box;
    padding: 0;
    width: 300px;
    height: 1.5em;
    border-radius: 0.75em;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    background: #ccc;
}
input[type='range']::-moz-range-track {
    box-sizing: border-box;
    padding: 0.25em;
    width: 28em;
    height: 1.5em;
    border-radius: 0.75em;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    background: #ccc;
}
input[type='range']::-ms-track {
    border: none;
    box-sizing: border-box;
    padding: 0.25em;
    width: 28em;
    height: 1.5em;
    border-radius: 0.75em;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    background: #ccc;
    color: transparent;
}
input[type='range']::-moz-range-progress {
    box-sizing: border-box;
    border-left: solid 0.25em transparent;
    height: 1em;
    border-radius: 0.5em 0.1875em 0.1875em 0.5em / 50%;
    box-shadow: inset 0 -1px 1px #09313d, inset 0 1px 1px #c0edf3;
    background: #e12726;
    background-clip: padding-box;
    border-radius: 0.75em 0.1875em 0.1875em 0.75em / 50%;
    background-clip: padding-box;
}
input[type='range']::-ms-fill-lower {
    height: 1em;
    border-radius: 0.5em 0.1875em 0.1875em 0.5em / 50%;
    box-shadow: inset 0 -1px 1px #09313d, inset 0 1px 1px #c0edf3;
    background: #e12726;
    background-clip: padding-box;
}
input[type='range']::-webkit-slider-thumb {
    position: relative;
    margin-top: -0.375em;
    box-sizing: border-box;
    border: solid 0.125em rgba(33, 33, 33, 0.5);
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    box-shadow: 0 .125em .125em #3b4547;
    background: $brandbasic;
    background-clip: border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% .125em, .125em 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 115% 115%;
    filter: drop-shadow(0 1px #516570);
}
input[type='range']::-moz-range-thumb {
    box-sizing: border-box;
    border: solid 0.125em rgba(33, 33, 33, 0.5);
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    box-shadow: 0 .125em .125em #3b4547;
    background: radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(at 50% 0 at 50% 0, #777777, rgba(119, 119, 119, 0) 71%) 50% 0, radial-gradient(at 50% 100% at 50% 100%, #777777, rgba(119, 119, 119, 0) 71%) 50% 100%, radial-gradient(at 0 50% at 0 50%, #777777, rgba(119, 119, 119, 0) 71%) 0 50%, radial-gradient(at 100% 50% at 100% 50%, #777777, rgba(119, 119, 119, 0) 71%) 100% 50%, radial-gradient(rgba(59, 69, 71, 0) 50%, #3b4547 71%) 50% -0.25em #fff;
    background-clip: border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% .125em, .125em 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 115% 115%;
}
input[type='range']::-ms-thumb {
    box-sizing: border-box;
    border: solid 0.125em rgba(33, 33, 33, 0.5);
    width: 2.25em;
    height: 2.25em;
    border-radius: 50%;
    box-shadow: 0 .125em .125em #3b4547;
    background: radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(#777777, rgba(119, 119, 119, 0) 70%) 50% 50%, radial-gradient(at 50% 0 at 50% 0, #777777, rgba(119, 119, 119, 0) 71%) 50% 0, radial-gradient(at 50% 100% at 50% 100%, #777777, rgba(119, 119, 119, 0) 71%) 50% 100%, radial-gradient(at 0 50% at 0 50%, #777777, rgba(119, 119, 119, 0) 71%) 0 50%, radial-gradient(at 100% 50% at 100% 50%, #777777, rgba(119, 119, 119, 0) 71%) 100% 50%, radial-gradient(rgba(59, 69, 71, 0) 50%, #3b4547 71%) 50% -0.25em #fff;
    background-clip: border-box;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-size: 100% .125em, .125em 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 115% 115%;
}
.js input[type='range']::-webkit-slider-runnable-track:before, .js input[type='range'] /deep/ #track:before {
    position: absolute;
    top: 0.25em;
    left: 0.25em;
    width: 0em;
    height: 1em;
    border-radius: 0.5em 0.1875em 0.1875em 0.5em / 50%;
    box-shadow: inset 0 -1px 1px #09313d, inset 0 1px 1px #c0edf3;
    background: #e12726;
    background-clip: padding-box;
    content:'';
}
.js input[type='range']::-webkit-slider-thumb:before, .js input[type='range']::-webkit-slider-thumb:after, .js input[type='range'] /deep/ #thumb:before, .js input[type='range'] /deep/ #thumb:after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    color: #ebeef3;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(211, 23, 22, 0.5);
}
.js input[type='range']::-webkit-slider-thumb:before, .js input[type='range'] /deep/ #thumb:before {
    width: 4em;
    height: 2.25em;
    border-radius: 0.125em;
    transform: translate(-50%, -0.5em);
    box-shadow: inset 0 1px 1px #d1e4f9;
    background: #212121;
    clip-path: polygon(2.375em 1.875em, 2em 2.25em, 1.625em 1.875em, 0.125em 1.875em, 0.07716em 1.86548em, 0.03661em 1.83839em, 0.00952em 1.79784em, 0em 1.75em, 0em 0.125em, 0.00952em 0.07716em, 0.03661em 0.03661em, 0.07716em 0.00952em, 0.125em 0em, 3.875em 0em, 3.92284em 0.00952em, 3.96339em 0.03661em, 3.99048em 0.07716em, 4em 0.125em, 4em 1.75em, 3.99048em 1.79784em, 3.96339em 1.83839em, 3.92284em 1.86548em, 3.875em 1.875em);
    font: 2em/1.40625em trebuchet ms, verdana, arial, sans-serif;
    content:"0%";
}
.js input[type='range']::-webkit-slider-thumb:after, .js input[type='range'] /deep/ #thumb:after {
    width: 9.6em;
    border-radius: 50%;
    transform: translate(-50%, -2.75em);
    box-shadow: 0 2.25em 0.625em -0.5em rgba(55, 84, 92, 0.75);
    font: 0.75em trebuchet ms, verdana, arial, sans-serif;
    white-space: nowrap;
    content:"Making an enquiry";
}
input[type='range']:focus {
    outline: none;
    opacity: .99;
    border: none;
    box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <input type='range' id="commitmentdesktop" class="form-control" name="commitmentdesktop" value='0' step="20">
        <select id="commitmentmobile" name="commitmentmobile" class="form-control smaller-select">
            <option>&nbsp;</option>
            <!-- NOTE: These are now generated in JavaScript.
            <option value="5">I'm ready to Start</option>
            <option value="4">I want to do this</option>
            <option value="3">I'm very interested</option>
            <option value="2">I want to know more</option>
            <option value="1">I'm not sure this is right for me</option>
            <option value="0">Just making an enquiry</option>
            -->
        </select>
    </div>
</div>

关于javascript - 链接两个表单输入以相对于彼此动态更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32093653/

文章推荐： php - mb_strlen() 够了吗？

文章推荐： windows - 获取 Windows 计算机网卡速度的 PowerShell 脚本

文章推荐： php - 我需要一个 array_keys_recursive()

文章推荐： html - Aed html 货币符号代码

JavaScript:动态(动态)创建样式元素的优缺点
在 JavaScript 中，我们可以动态创建元素并附加到部分，以便为大量元素应用 CSS 规则。这种方法的优点或缺点是什么？如果它确实提供了与元素上的 javascript 迭代相比的性
flutter - Flutter Dart:错误_ImmutableMap <动态，动态>' is not a subtype of type ' Map
我有这个代码 import "./HTTPMethod.dart"; import '../../DataModel/DataModel.dart'; mixin RouterMixin { HT
mdx - 动态、动态、OLAP 维度
哪些 OLAP 工具支持动态、动态地创建维度或层次结构？例如，层次结构将成员定义为:“前 5 名”、“前 6-10 名”、“其他”... 计算成员是通常的答案，我正在寻找不同的东西。计算器的问题。成
validation - 动态/动态 CakePhp 3 验证和 FormHelper
我正在 CakePHP 中创建一个“表单编辑器”。该界面允许用户选择要应用于字段的验证，例如数字、电子邮件等因此，我需要根据用户输入为模型动态创建验证。为此，我可以使用验证对象:https://b
java - 动态(动态)生成 Web 服务 - 如何？
这是一个场景: 我有一个Web服务，我们将其称为部署在tomcat(轴)上的StockQuoteService。通过此 Web 服务公开了 getStockQuote() 方法。现在，我想构建一个
dart - 未处理的异常 : InternalLinkedHashMap' is not a subtype of type ' 列表<动态>
我正在尝试从服务器获取 JSON 响应并将其输出到控制台。 Future login() async { var response = await http.get( Uri.
json - Flutter dart json未处理的异常: InternalLinkedHashMap' is not a subtype of type '列表<动态>
我从另一个问题中得到了这段代码(感谢 chunhunghan)。我需要创建一个登录屏幕，并尝试根据服务器发回给我的响应来验证用户凭据，但是每次我尝试运行代码时，它都会给我“未处理的异常:Interna
Dart 代码在我的 Flutter 应用程序中表现不同。列表<动态 >' is not a subtype of type ' 列表< map <字符串，动态>>
当我在“Dart”主程序中运行它时，一切正常，并且我得到了一个与会者列表。但是，当我在我的 Flutter 应用程序中调用它时，出现错误: flutter:“List”类型不是“List>”类型的子类
js实现验证码干扰(动态)
本文实例为大家分享了js实现验证码动态干扰的具体代码，供大家参考，具体内容如下效果一效果二代码一 ?
Cloudflare 动态 DNS
目前我正在为我的网站使用 No-Ip，我想使用 cloudflare 来抵御 ddos 和机器人程序。我注意到您需要一个用于 cloudflare 的域。我还搜索了网络，发现了一个叫做 cloud
vba - 动态 IF 语句
有没有办法在 Excel VBA 中构建动态 if 语句？基本上我正在尝试创建一个参数化计算，用户将能够输入不同的变量，即变量 1 “变量 2” “变量 3” 在这种情况下变量 1 是单元格引用
vba - 格式化(动态)
大家好，请查看上面的图片，我有两张 table 。在下面代码的第一个表中，我得到了这种格式。但我想像 Table2 那样格式化，每个合并单元格中的行数是动态的，而且不一样。有没有办法像table
header - 动态 heightForHeaderInSection
如何根据我添加的 View 修改标题部分的高度？heightForHeaderInSection在 viewForHeaderInSection 之前被调用我不知道 View 大小，直到我创建它。最
parsing - 动态 (?) 解析器
是否存在在运行时生成 AST/解析树的解析器？有点像一个库，它会接受一串 EBNF 语法或类似的东西并吐出数据结构？我知道 antlr、jlex 和他们的同类。他们生成可以做到这一点的源代码。 (喜
Django 动态 OR 查询
我在持有汽车制造商的表格上有一个 MultipleChoiceField。我想将我的汽车数据库过滤到已检查的品牌，但这会导致问题。如何动态获取所有 Q(make=...) 语句？我如何开始:['va
PHP 动态 preg_replace
$end = preg_replace($pattern, $replacement, $str); 如何使替换字符串 $replacement 随 $str 中的每次匹配而变化？例如，我想用关联的图
excel - 在VBA中获取表范围(动态)
我正在编写一个 VBA 程序，用于过滤表中的值。我试图使其成为一个适用于您提供的所有表格的通用程序。在我的程序中，我必须设置它正在过滤的表的范围:Set rng = dataSheet.Range("
javascript - 动态/递归结构中的切换按钮
我正在循环一个元素数组，并且我想使用给定的模板递归地显示该元素然后在该模板内使用带有切换功能的按钮来显示/隐藏给定元素的Child的更深级别模板(Child也是一个元素) 这是我的模板
javascript - 使用对象选择要运行的函数(动态)
从客户端(html)发送表单，服务器端通过选择选项之一决定运行哪个函数。 const decideWho = (form) => { const choice = form.choice; c
java - 动态/编程设置具有可绘制背景的按钮的大小
我有一个具有以下属性的按钮: circle_normal.xml(在 res/drawable 中) circle.xml(在 res/drawable 中)

可可西里

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 链接两个表单输入以相对于彼此动态更新

代码