jquery - 更改所选分组单选按钮的背景

Question

我有一个单选按钮组，我需要更改所选按钮的背景颜色。

单选按钮值由 MySQLi 查询返回，如果值为“0”，则将所选按钮的背景颜色更改为“红色”，并将其他按钮更改为“灰色”。

我已检查以确保查询返回我期望的数据，并且确实如此。当我加载表单时，错误的单选按钮(按钮 1)始终显示为选中状态。

我为每个状态都有一个 CSS 类:

var mb = result[15];
if (mb == 1) {
  // BUTTON 1 IF QUERY RETURNS "1"
  console.log("MAIN BOARD DISPLAY", mb);
  $('#EditDisplayMainBoard_1').prop('checked', true);

  if ($('#EditDisplayMainBoard_1').is(':checked')) {
    $("#EditDisplayMainBoard_1")
      .parent()
      .removeClass('btn btn-primary form-check-label')
      .addClass('btn btn-primary-conf form-check-label');
  }
} else {
  // BUTTON 2 IF QUERY RETURNS "0"
  console.log("MAIN BOARD DISPLAY", mb);
  $('#EditDisplayMainBoard_0').prop('checked', true);

  if ($('#EditDisplayMainBoard_0').is(':checked')) {
    $("#EditDisplayMainBoard_0")
      .parent()
      .removeClass('btn btn-primary form-check-label')
      .addClass('btn btn-primary-conf form-check-label');
  }
}

.btn-primary {
  color: #333333;
  background-color: #CCCCCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  width: 175px;
  text-align: center;
  height: 13px;
  border-radius: 0 !important;
  border: 0.5px solid #CCC !important;
  margin-top: 1px;
}

.btn-primary-conf {
  color: #333333;
  background-color: #990000;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 11px;
  width: 175px;
  text-align: center;
  height: 13px;
  border-radius: 0 !important;
  border: 0.5px solid #CCC !important;
  margin-top: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BUTTON 1 GREEN BACKGROUND IF CHECKED -->
<label class="btn btn-primary form-check-label active">
  Display On
  <span class="rhidden">
      <input type="radio" name="BoardLevel" value="1" id="EditDisplayMainBoard_1">
    </span>
</label>
<!-- BUTTON 2 RED BACKGROUND IF CHECKED -->
<label class="btn btn-primary form-check-label ">
  Display Off
  <span class="rhidden">
    <input type="radio" name="BoardLevel" value="0" id="EditDisplayMainBoard_0" >
  </span>
</label>

我的新代码如下，但这仍然不会更改每个单选组按钮的类。

if (mb == 1) {
  $("#EditDisplayMainBoard_1")
    .removeClass('btn btn-primary form-check-label')
    .addClass('btn btn-primary-conf form-check-label');
  $("#EditDisplayMainBoard_0")
    .removeClass('btn btn-primary-conf form-check-label')
    .addClass('btn btn-primary form-check-label');
} else {
  $("#EditDisplayMainBoard_1")
    .removeClass('btn btn-primary-conf form-check-label')
    .addClass('btn btn-primary form-check-label');
  $("#EditDisplayMainBoard_0")
    .removeClass('btn btn-primary form-check-label')
    .addClass('btn btn-primary-conf form-check-label');
}

我哪里出错了？

Answer 1

我已经重新格式化了你的帖子。现在您可以清楚地看到出了什么问题:

你的按钮在 HTML 中是这样的:

<label class="btn btn-primary form-check-label active">
  Display On
  <span class="rhidden">
    <input type="radio" name="BoardLevel" value="1" id="EditDisplayMainBoard_1">
  </span>
</label>

这是一个 label > span > input 的层次结构。

在原始(第一个)代码中，选择 input 元素，然后获取父元素并删除/添加一些类。

但是，从层次结构中可以清楚地看到，父元素是 span 元素，而不是 label 元素。为此，您需要额外的 .parent()。

所以，假设其他代码是正确的，它应该是:

var mb = result[15];
if (mb == 1) { 
  // BUTTON 1 IF QUERY RETURNS "1"
  console.log("MAIN BOARD DISPLAY", mb);
  $('#EditDisplayMainBoard_1').prop('checked', true);

  if ($('#EditDisplayMainBoard_1').is(':checked')) {
    $("#EditDisplayMainBoard_1")
      .parent().parent()
      .removeClass('btn-primary')
      .addClass('btn-primary-conf');
  }
} else { 
  // BUTTON 2 IF QUERY RETURNS "0"
  console.log("MAIN BOARD DISPLAY", mb);
  $('#EditDisplayMainBoard_0').prop('checked', true);

  if ($('#EditDisplayMainBoard_0').is(':checked')) {
    $("#EditDisplayMainBoard_0")
      .parent().parent()
      .removeClass('btn-primary')
      .addClass('btn-primary-conf');
  }
}

另请注意，您不必删除并重新添加 btn 和 form-check-label 类，因此我也删除了它们。

--

一些注意事项:

1. 我格式化 HTML 的方式(为了便于阅读)在 Display On 文本与 span 和 input 元素之间引入了一些空格。这可能在最终网页上显示为空格。如果您不希望这样，最简单的解决方案是再次删除空格。
2. 如果您想检查哪些元素的类发生了更改，您可以在 DOM 查看器中检查这些元素。几乎每个浏览器都有一个。右键单击该元素并选择“检查元素”或类似的内容，或者在 Firefox 或 Chrome 上按 F12 打开开发人员工具并转到“检查器”或“DOM 查看器”选项卡，然后在那里找到您的元素并验证您是否更改了正确的一个。
3. 您的新代码不起作用的原因与旧代码不起作用的原因相同:您没有选择正确的元素(您需要两次 .parent() 调用)。