Question

当收音机为i时，我想将far前缀从fas更改为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>

如何在单选检查中更改FA图标前缀？

1 个答案: