javascript - 如何更改 radio 检查上的 FA 图标前缀？

Question

我想更改i前缀来自 far至fas当 radio 是checked时.

如果输入为checkboxes，则此代码有效。 ，但当它们是 radio's 时将不起作用。第一次单击后始终保持选中状态。

如何让此函数像针对复选框一样针对单选按钮运行？

$(document).ready(function() {
  $('input[name="sort"]').change(function() {
    if (
      $(this)
      .closest('[class*="list-"]')
      .is(".list-alt")
    ) {
      if ($(this).is(":checked")) {
        $(this)
          .siblings("[data-icon]")
          .attr("data-prefix", "fas")
          .closest(".launch-icon")
          .addClass("checked");
      } else {
        $(this)
          .siblings("[data-icon]")
          .attr("data-prefix", "far")
          .closest(".launch-icon")
          .removeClass("checked");
      }
    }
  });
  $('input[name="sort"]').change();
});

.list-alt {
  display: flex;
}

.launch-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  padding: 12px
}

.launch-icon:hover,
.launch-icon.checked,
.launch-icon.checked [data-icon] {
  color: #03a9f4;
}

<script src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-alt">
  <label class="launch-icon">
        <input type="radio" name="sort">
        <i class="far fa-shopping-bag"></i>
      </label>
  <label class="launch-icon">
        <input type="radio" name="sort">
        <i class="far fa-stream"></i>
      </label>
  <label class="launch-icon">
        <input type="radio" name="sort">
        <i class="far fa-train"></i>
      </label>
</div>

Answer 1

我认为这就是您正在寻找的。你的 JavaScript 看起来有点困惑，所以我做了一些改变。

$(function() {
  var allRadios = $(".list-alt input[type='radio']");
  $(allRadios).click(function() {
    // reset all checkbox to original state
    allRadios.each(function(i, elm) {
      var icon = $(elm).next("svg");
      icon.attr("data-prefix", "far");
      $(elm).parents("label").removeClass("checked");
    });
    
    // change the checked checkbox's icon
    $(this).next("svg").attr("data-prefix", "fas");
    $(this).parents("label").addClass("checked");
  });
});

.list-alt {
  display: flex;
}

.launch-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  padding: 12px
}

.launch-icon:hover,
.launch-icon.checked,
.launch-icon.checked [data-icon] {
  color: #03a9f4;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>

<div class="list-alt">
  <label class="launch-icon">
    <input type="radio" name="sort">
    <i class="far fa-shopping-bag"></i>
  </label>
  <label class="launch-icon">
    <input type="radio" name="sort">
    <i class="far fa-stream"></i>
  </label>
  <label class="launch-icon">
    <input type="radio" name="sort">
    <i class="far fa-train"></i>
  </label>
</div>