使用jQuery为选定的单选按钮添加CSS类

Question

我正在尝试根据所选的单选按钮向单选按钮添加CSS类。

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $("input[type=radio][name=align]").val();
  if (radVal == 'center') {
    $(".tlt1").addClass('centerCssClass').change();
    $(".tlt1").removeClass('topCssClass').change();
  } else if (radVal == 'top') {
    $(".tlt1").addClass('topCssClass').change();
    $(".tlt1").removeClass('centerCssClass').change();
  }
});

.centerCssClass {
  background-color: blue;
}

.topCssClass {
  background-color: red;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1"></div>

- pv619

Answer 1

您在这里有两个问题。首先，您从中检索值的选择器不正确。您应该使用this引用从单击的单选按钮获取值。

其次，您需要使CSS类更加具体，以便覆盖.tlt1的原始background-color设置。尝试这个：

var $tlt = $(".tlt1");

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $(this).val();
  if (radVal == 'center') {
    $tlt.addClass('centerCssClass').removeClass('topCssClass');
  } else if (radVal == 'top') {
    $tlt.addClass('topCssClass').removeClass('centerCssClass')
  }
});

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

.tlt1.centerCssClass {
  background-color: blue;
}

.tlt1.topCssClass {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1"></div>

请注意，您也不需要触发div元素的change()事件，因为这是多余的。

- Rory McCrossan

---

谢谢@Rory提供详细的解释。这个答案解决了我的问题，并让我对所发布的问题有了深入的了解。谢谢兄弟。 - pv619

这就是我们在这里的原因 :) - Rory McCrossan

Answer 2

你需要使用:checked选择器来获取选中的单选按钮的值，并略微更改CSS类声明以覆盖background-color。

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $("input[type=radio][name=align]:checked").val();
  if (radVal == 'center') {
    $(".tlt1").addClass('centerCssClass').removeClass('topCssClass');
  } else if (radVal == 'top') {
    $(".tlt1").addClass('topCssClass').removeClass('centerCssClass');
  }
});

.tlt1.centerCssClass {
  background-color: blue;
}

.tlt1.topCssClass {
  background-color: red;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

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

<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1">tlt1</div>

- Satpal

---

感谢@Satpal发布详细的答案。谢谢您的时间，祝您有美好的一天兄弟 :) - pv619

@pv619，很高兴我能帮到你。 - Satpal

Answer 3

由于tlt1的背景颜色无法被覆盖，因此您需要在centerCssClass、topCssClass CSS后面添加!important。

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $(this).val();
  var tlt1 = $("#tlt1");
  if (radVal == 'center') {
    tlt1.addClass('centerCssClass').change();
    tlt1.removeClass('topCssClass').change();
  } else if (radVal == 'top') {
    tlt1.addClass('topCssClass').change();
    tlt1.removeClass('centerCssClass').change();
  }
});

.centerCssClass {
  background-color: blue !important;
}

.topCssClass {
  background-color: red !important;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div id='tlt1' class="tlt1"></div>

- Wei Lin

---

感谢@IT在CSS方面提供的帮助。我已经在CSS中添加了!important。谢谢你，祝你有美好的一天 :) - pv619

@pv619，使用!important是不好的做法，应该避免使用。请参考我的或Rory的答案，并阅读https://dev59.com/FHA65IYBdhLWcg3wqAWt和https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity。 - Satpal

这是我的荣幸。 :) - Wei Lin

Answer 4

您的解决方案是正确的，只需要在change事件中将var radVal = $("input[type=radio][name=align]").val();更改为var radVal = $(this).val();

因为现在您获取的是第一个具有属性type='radio'和name='align'的input元素的值。所以在您的情况下，第一个元素的值为center，因此始终为center。通过使用$(this)，您可以获取实际更改的元素。

另外，您不必在.tlt1元素上触发change()事件。

最后，在您的css中，较低的值比较高的值更受尊重。这就是为什么您的背景没有改变的原因。因为类.tlt1的背景比类centerCssClass更重要。

以下是一个可工作的示例

$("input[type=radio][name=align]").on('change', function () {
    var radVal = $(this).val();
    if (radVal == 'center') {
        $(".tlt1").addClass('centerCssClass');
        $(".tlt1").removeClass('topCssClass');
    } else if (radVal == 'top') {
        $(".tlt1").addClass('topCssClass');
        $(".tlt1").removeClass('centerCssClass');
    }
});

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

.centerCssClass {
  background-color: blue;
}

.topCssClass {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1"></div>

- Krzysztof Janiszewski

---

感谢兄弟对$this值的深入解答。这让我更好地理解了问题，并获得了更多的信息。祝你有美好的一天，兄弟 :) - pv619

Answer 5

尝试这个

使用 id 替代 class tlt1

$("input[type=radio][name=align]").on('change', function() {
  var radVal = $(this).val();
  if (radVal == "center") {
    $("#tlt1").removeClass('topCssClass').change();
    $("#tlt1").addClass('centerCssClass').change();
    $("#tlt1").removeClass('tlt1');
  } else {
    $("#tlt1").removeClass('centerCssClass').change();
    $("#tlt1").addClass('topCssClass').change();
    $("#tlt1").removeClass('tlt1');
  }
});

.centerCssClass {
  float: left;
  height: 300px;
  width: 300px;
  background-color: blue;
}

.topCssClass {
  float: left;
  height: 300px;
  width: 300px;
  background-color: red;
}

.tlt1 {
  float: left;
  height: 300px;
  width: 300px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="align" value="center">Center<br>
<input type="radio" name="align" value="top">Top<br>
<div class="tlt1" id="tlt1"></div>

- Bhargav Chudasama

---

谢谢你的回答，祝你有愉快的一天 :) - pv619