文本从无线电交换为活动按钮

Question

我选择fa-icon的{​​{1}}转到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);
});

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>

Answer 2

如果您不想更改自己的HTML， 您可以使用nodeType===3过滤掉$(.menu-btn).contents()中的所有文字内容，然后将其替换为您想要的值。

＆＃13;

＆＃13;

$("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);
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;