Question

我有以下代码...

var currentBaseValue = $('#selectedBaseRelease').val();
if (document.getElementById("hidden").checked === false && document.getElementById("unlisted").checked === false) {
  loadbaseText(currentBaseValue);
} else if (document.getElementById("hidden").checked === true && document.getElementById("unlisted").checked === false) {
  var currentBaseValue = currentBaseValue + '.hidden';
  loadbaseText(currentBaseValue);
} else if (document.getElementById("hidden").checked === true && document.getElementById("unlisted").checked === true) {
  var currentBaseValue = currentBaseValue + '.hidden.unlisted';
  loadbaseText(currentBaseValue);
} else if (document.getElementById("hidden").checked === false && document.getElementById("unlisted").checked === true) {
  var currentBaseValue = currentBaseValue + '.unlisted';
  loadbaseText(currentBaseValue);
}

document.getElementById("hidden").addEventListener("click", function(event) {
  var currentBaseValue = $('#selectedBaseRelease').val();
  if (document.getElementById("hidden").checked === true && document.getElementById("unlisted").checked === false) {
    var currentBaseValue = currentBaseValue + '.hidden';
    loadbaseText(currentBaseValue);
  } else if (document.getElementById("hidden").checked === false && document.getElementById("unlisted").checked === false) {
    loadbaseText(currentBaseValue);
  } else if (document.getElementById("hidden").checked === true && document.getElementById("unlisted").checked === true) {
    var currentBaseValue = currentBaseValue + '.hidden.unlisted';
    loadbaseText(currentBaseValue);
  } else if (document.getElementById("hidden").checked === false && document.getElementById("unlisted").checked === true) {
    var currentBaseValue = currentBaseValue + '.unlisted';
    loadbaseText(currentBaseValue);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectedBaseRelease">
  <option value="url1">A</option>
  <option value="url2" selected>B</option>
  <option value="url3">C</option>
  <option value="url4">D</option>
</select>

如您所见，存在被定义为侦听事件的“隐藏”和“未列出”（复选框）。激活和停用复选框后，一切都很好-我看到了期望的更改。但是，当选择ID选择从D更改为A时，即使我认为紧接在选择ID部分之后的代码也涵盖了该条件，但复选框的状态未得到处理。

但是select部分后面的代码没有类似侦听的声明。我该如何确保每次选择ID值更改时，复选框的当前状态都将得到处理？

谢谢！

Answer 1

稍微清理一下这段代码可以使问题更简单。在这里，我已将事件侦听器附加到每个输入，因此您可以清楚地看到我们如何响应状态更改：

var unlisted = document.querySelector('#unlisted');
var hidden = document.querySelector('#hidden');
var text = document.querySelector('#text');
var select = document.querySelector('#select');

[hidden, unlisted, select].forEach(function(elem) {
  elem.addEventListener('change', function(event) {
    var baseVal = select.value;
    if (hidden.checked) baseVal += '.hidden';
    if (unlisted.checked) baseVal += '.unlisted'
    loadBaseText(baseVal);
  });
})

function loadBaseText(s) {
  text.textContent = s; 
}

<select id="select">
  <option value="url1">A</option>
  <option value="url2" selected >B</option>
  <option value="url3">C</option>
  <option value="url4">D</option>
</select>

<div>Hidden</div>
<input id='hidden' type='checkbox' />

<div>Unlisted</div>
<input id='unlisted' type='checkbox' />

<div>Result</div>
<div id='text' />

侦听事件以选择ID更新

1 个答案: