Question

我的网络应用的head部分中有以下代码：

<script> 
    $(document).ready(function(){
        $("#menu_s").click(function(){
            $("upt").replaceWith(function(n){
                return "<h2>Αρχικά Πιάτα</h2>";
            });
        });
        $("#menu_md").click(function(){
            $("upt").replaceWith(function(n){
                return "<h2>Κυρίως Πιάτα</h2>";
            });
        });
    });
</script>

以及body部分中的以下代码（只是其中的一部分 - 必要的:) :)

<section>
    <header>
        <upt><h2>Φαγητά & Ποτά</h2></upt>
        <h3>FoodBall Admin</h3>
    </header>
    <div id="tabs">
        <ul class="ca-menu">
            <li>
                <a href="#starters" id="menu_s">
                    <span class="ca-icon">&#59;</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Αρχικά Πιάτα</h2>
                    </div>
                </a>
            </li>
            <li>
                <a href="#main_dishes" id="menu_md">
                    <span class="ca-icon">&#59;</span>
                    <div class="ca-content">
                        <h2 class="ca-main">Κυρίως Πιάτα</h2>
                    </div>
                </a>
            </li>
        </ul>
   </div>
</section>

当我点击两个href链接中的任何一个时，标题更新成功。但是，当我点击第二时间时，无会发生。

任何建议都会非常有用，因为我已经坚持了一段时间。

Answer 1

第一次使用它是因为有一个upt标签，但第二次不起作用，因为你用h2标签替换它。你需要在upt标签内替换h2，如下所示：

<script> 
$(document).ready(function(){
    $("#menu_s").click(function(){
        $("upt").replaceWith(function(n){
            return "<upt><h2>Αρχικά Πιάτα</h2></upt>";
        });
    });
    $("#menu_md").click(function(){
        $("upt").replaceWith(function(n){
            return "<upt><h2>Κυρίως Πιάτα</h2></upt>";
        });
    });
});

现在第二次upt标签就在那里。希望这会有所帮助。

Answer 2

您可以只替换内部HTML，而不是替换整个upt元素，如下面的代码所示：

$("upt h2").html("Κυρίως Πιάτα");

当您使用函数的返回元素（即upt）替换<h2>...</h2>标记时，您基本上是从DOM中删除upt元素。

它第一次工作（因为元素在那里，在DOM中），但在第一次点击后，它被h2取代（并且它不再在那里选择第二次点击）

请参阅下面的运行演示

＆＃13;

 $(document).ready(function() {
   $("#menu_s").click(function() {
     $("upt h2").html("Αρχικά Πιάτα");
   });

   $("#menu_md").click(function() {
     $("upt h2").html("Κυρίως Πιάτα");
   });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <header>
    <upt>
      <h2>Φαγητά & Ποτά</h2>
    </upt>
    <h3>FoodBall Admin</h3>
  </header>
  <div id="tabs">
    <ul class="ca-menu">
      <li>
        <a href="#starters" id="menu_s">
          <span class="ca-icon">&#59;</span>
          <div class="ca-content">
            <h2 class="ca-main">Αρχικά Πιάτα</h2>
          </div>
        </a>
      </li>
      <li>
        <a href="#main_dishes" id="menu_md">
          <span class="ca-icon">&#59;</span>
          <div class="ca-content">
            <h2 class="ca-main">Κυρίως Πιάτα</h2>
          </div>
        </a>
      </li>
    </ul>
  </div>
</section>

＆＃13;

通过＆＃39; onclick＆＃39;更改元素的标题。使用JQuery的事件

2 个答案: