Question

这是问题Replacing text of one tag with another的一个问题，但基本上这个JavaScript函数有效，但当我点击后退按钮而不是它产生一个文本项时，它重复文本12次而我不能找出原因。

<header></header>
<a class="back">Back</a>
<ul>
  <li>
    <a href="#">Something</a>
  </li>
  <li>
    <a href="#">Something1</a>
  </li>
  <li>
    <a href="#">Something2</a>
  </li>
  <li>
    <a href="#">Something3</a>
  </li>
</ul>

$(".back").click(function(e) {
  e.preventDefault();
  var val = $('header').data('value');
  $('header').text(val);
});

所以当我点击后退按钮，而不是返回“主题1”时，它返回标题“主题1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1”

像这样：

<header>Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1Topic 1</header>
<a class="back">Back</a>
<ul>
  <li>
    <a href="#">Something</a>
  </li>
  <li>
    <a href="#">Something1</a>
  </li>
  <li>
    <a href="#">Something2</a>
  </li>
  <li>
    <a href="#">Something3</a>
  </li>
</ul>

Answer 1

您需要做的是从标题中保存原始值，然后在单击＆＃34;返回＆＃34;时将原始值替换为原始值。按钮。

这是工作代码：

＆＃13;

    $(document).ready(function () {
        
        var original = $("header").text();

        $(".back").click(function (e) {            
            e.preventDefault();            
            $('header').text(original);
        });      
        
        $("li a").click(function (e) {            
            e.preventDefault();            
            $('header').text( $(this).text() );
        });  

    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>Original content</header>
<a class="back">Back</a>

<ul>
    <li> <a href="#">Something</a>

    </li>
    <li> <a href="#">Something1</a>

    </li>
    <li> <a href="#">Something2</a>

    </li>
    <li> <a href="#">Something3</a>

    </li>
</ul>

＆＃13;

需要一个不重复的单个文本元素

1 个答案: