如何在jquery

Question

我正在使用jQuery在click事件中查找iframe中的每个目标元素。下面是我使用的代码。我正在使用此函数在单击时设置每个目标元素的样式。此功能用于更改标题样式。

假设我在iframe中有一个h3标记。单击h3标签时，我需要根据单选按钮更改标题选项。更改单选按钮后，我已根据单选按钮值将标签h3替换为其他标题标签，如h1，h2，h3，h4。但问题是，最初我的目标对象是h3，在更改单选按钮后，我的目标也发生了变化。

如何通过替换目标对象来解决此问题？

＆＃13;

＆＃13;

var getElement = function() {
  $('[data-edit="froala"]').on('froalaEditor.initialized', function(e, editor) {
    var $div_tag = $('[data-edit="froala"]').find('iframe').contents().find('body');
    $div_tag.on('click', function(e) {
      var element_name = e.target.nodeName.toLowerCase();
      var $target_class = $('[data-target="' + element_name + '"]');
      trigger_object(e, element_name);
    });
  });
}

var trigger_object = function(e, element_name) {
  $('[data-style="size-style"]').off('change').on('change', function(event) {
    if ($(this).data('css') == 'heading-size') {
      if (this.value == 'jumbo') {
        var html = $(e.target).html();
        var $a = $("<h1>" + html + "</h1>");
        $(e.target).replaceWith($a);
      } else if (this.value == 'headline') {} else if (this.value == 'subhead') {} else if (this.value == 'small_subhead') {}
    }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span6 wid_options">
  <input type="radio" name="heading_size" value="jumbo" data-attr="heading-size" data-style="size-style" data-css="heading-size">
  <p>Jumbo</p>
</div>
<div class="span6 wid_options">
  <input type="radio" name="heading_size" value="headline" data-attr="heading-size" data-style="size-style" data-css="heading-size">
  <p>Headline</p>
</div>
<div class="span6 wid_options">
  <input type="radio" name="heading_size" value="subhead" data-attr="heading-size" data-style="size-style" data-css="heading-size">
  <p>Subhead</p>
</div>
<div class="span6 wid_options">
  <input type="radio" name="heading_size" value="small_subhead" data-attr="heading-size" data-style="size-style" data-css="heading-size">
  <p>Small Subhead</p>
</div>

＆＃13;

＆＃13;

＆＃13;