Question

我是jQuery的新手。我试图找到解决方案，但没有结果。问题：第一次，它正确地改变了语言，但只是一次。我该怎么办？

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container"><h2>Dropdowns</h2>
    <div class="dropdown font-weight-bold">
        <a class="dropdown-toggle" href="#"  data-toggle="dropdown"><span id="selected">FR</span></a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item language" href="#">It</a></li>
            <li><a class="dropdown-item language" href="#">De</a></li>
            <li><a class="dropdown-item language" href="#">Fr</a></li>
            <li><a class="dropdown-item language" href="#">En</a></li>
        </ul>
    </div>
</div>
   <script type="text/javascript">
    $(document).ready(function() {
      $(".language").on("click", function(event){
        event.preventDefault();
        var currentlanguage = $(this).text();
        console.log(currentlanguage);
        $("#selected").replaceWith(currentlanguage);
    });
});
   </script>
</body>
</html>

Answer 1

使用$("#selected").html(currentlanguage);或$("#selected").text(currentlanguage);代替$("#selected").replaceWith(currentlanguage);

您的代码正在用文本替换("#selected")范围。因此，下次更改语言时，#selected范围不存在。

所以你只需要改变那个范围的HTML。不是跨度本身。

Answer 2

根据文档replaceWith()从DOM中删除内容，并通过一次调用在其位置插入新内容。因此，当您第二次单击时，#selected div不存在。

请尝试.text()，因为没有涉及html标签

$("#selected").text(currentlanguage);

Demo

jQuery click没有第二次应用

2 个答案: