javascript - 当我将它们与 jQuery 一起使用时，myul 中的元素消失了

Question

我在 Foundation 的下拉面板中创建了一个列表。在该列表中，我有链接。这是我的 list :

<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
    <div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
      <ul class="plzlist">
        <li><a class="plzclick">10000 - 19999</a></li>
        <li><a class="plzclick">20000 - 39999</a></li>
        <li><a class="plzclick">40000 - 59999</a></li>
        <li><a class="plzclick">60000 - 79999</a></li>
        <li><a class="plzclick">80000 - 99999</a></li>
      </ul> 
    </div>

现在我正在使用 jQuery 脚本来检测元素是否被单击，以及当它们被单击时，将它们写入按钮。这是我的脚本:

<script type="text/javascript">
  $(document).ready(function(){

    $('.plzclick').on("click", function(){
      $('.plzddmenu').html(this);
    });

</script>

一切正常，除了我的元素从我的列表中消失，一旦我点击它们。任何人都知道，为什么他们会消失，我该如何解决这个问题让他们留下来？

Answer 1

你正在将你的项目移动到按钮上，你只需要将你的按钮 html 更改为被点击的标签 html 内容。

$(this).html();//返回元素的 html 内容。

  $(document).ready(function() {

    $('.plzclick').on("click", function() {
      $('.plzddmenu').html($(this).html());
      console.log(this);
      console.log($(this));
      console.log($(this).html());
    });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
  <ul class="plzlist">
    <li><a class="plzclick">10000 - 19999</a>
    </li>
    <li><a class="plzclick">20000 - 39999</a>
    </li>
    <li><a class="plzclick">40000 - 59999</a>
    </li>
    <li><a class="plzclick">60000 - 79999</a>
    </li>
    <li><a class="plzclick">80000 - 99999</a>
    </li>
  </ul>
</div>  

<script type="text/javascript">
</script>