javascript - 文本从单选按钮交换为事件按钮

Question

我有所选radio的fa-icon进入menu-btn，但是我如何从 radio ？

$("body").on("click", ".btn-opt", function(event) {
  var $el = $(this);
  var id = $el.attr("id");
  $(this)
    .parent()
    .parent()
    .find("span.selected")
    .removeClass("active");
  $el.find("span.selected").addClass("active");

  $(".menu-btn > i:first")
    .removeClass()
    .addClass("fa fa-fw fa-" + id);
  $(".menu-btn")
    .removeClass()
    .addClass("menu-btn btn btn-primary fg-" + id);
});

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>Menu</div>
  <div class="menu">
    <div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
      <label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i>&nbsp;Bag</label>
    </div>
    <div class="btn-opt btn fg-rocket" id="rocket">
      <label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i>&nbsp;Rocket</label>
    </div>
  </div>
</div>

Answer 1

如果您可以将需要更改的文本包装在其自己的元素中，则只需在代码底部再添加一行即可:

$("body").on("click", ".btn-opt", function(event) {
  var $el = $(this);
  var id = $el.attr("id");
  $(this)
    .parent()
    .parent()
    .find("span.selected")
    .removeClass("active");
  $el.find("span.selected").addClass("active");

  $(".menu-btn > i:first")
    .removeClass()
    .addClass("fa fa-fw fa-" + id);
  $(".menu-btn")
    .removeClass()
    .addClass("menu-btn btn btn-primary fg-" + id);
    
  // Set the top text to the text of the clicked element  
  $("span#topText").text($(this).text());
});

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="menu-btn btn fg-create"><i class="fa fa-plus fa-fw"></i><i class="arrow fa fa-fw"></i>
  
  <!-- Wrap the text to be changed in its own element -->
  <span id="topText">Menu</span>
  
  </div>
  <div class="menu">
    <div class="btn-opt btn fg-shopping-bag" id="shopping-bag">
      <label for="shopbtn"><input id="shopbtn" name="toggler" type="radio"><i class="fa fa-fw fa-shopping-bag"></i>&nbsp;Bag</label>
    </div>
    <div class="btn-opt btn fg-rocket" id="rocket">
      <label for="rocketbtn"><input id="rocketbtn" name="toggler" type="radio"><i class="fa fa-fw fa-rocket"></i>&nbsp;Rocket</label>
    </div>
  </div>
</div>