Обмен текстом с радио для активной кнопки

Question

У меня есть fa-icon для выбранного radio, идущего на menu-btn, но как мне также взять текст с радио?

$("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

Если вы не любите менять свой HTML, Вы можете использовать nodeType===3 для фильтрации всего текстового содержимого в $(.menu-btn).contents(), а затем заменить его на нужное вам значение.

$("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-child")
    .removeClass()
    .addClass("fa fa-fw fa-" + id);
  // find out all text content (nodeType===3), then replace with yours
  //.each is not required, you can change to [0].textContent = 'yourConent' if make sure at least exists one text content.
  $(".menu-btn").contents().filter(function() {
    return this.nodeType == 3
  }).each(function(){
    this.textContent = $el.find('label').text();
  });
  

  $(".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 2

Если вы можете обернуть текст, который необходимо изменить, в свой собственный элемент, вы можете просто добавить еще одну строку в конец кода:

$("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>