时间戳

首页 > 解决方案 > 如何在点击时传输输入值

javascript - 如何在点击时传输输入值

问题描述

我正在尝试制作像 wordpress 这样的菜单构建器。我在图片中有这样的东西。（https://prnt.sc/podhpu）。我在左侧输入一个值，然后单击按钮“Menü Ekle - eng。添加菜单”但值变为空。

我试图将值转移到一个名为“x”的变量中。然后点击我尝试发送 x 值“”但它不起作用。我认为它在发送之前需要触发器之类的东西，但我不确切知道。

HTML 代码：

<div class="kt-portlet__body">
    <div class="form-group">
        <label>URL</label>
        <input type="text" class="form-control menu-url" value="" placeholder="Menü başlığını giriniz.">
     </div>
    <div class="form-group">
        <label>Başlık</label>
        <input type="text" class="form-control menu-title" value="" placeholder="Menü bağlantı adresini giriniz.">
    </div>
    <a href="#" id="add-menu" class="btn btn-brand btn-elevate btn-icon-sm">Menü Ekle</a>
</div>

Javascript代码：

$(function(){
            var x = $('.menu-url').val();
            $('#add-menu').on('click', function (e) {
                $('#menu').append('<li>\n' +
                    '                    <div class="menu-item">\n' +
                    '                        <a href="#" class="delete-menu">\n' +
                    '                            <i class="fa fa-times"></i>\n' +
                    '                        </a>\n' +
                    '                        <input type="text" name="title[]" placeholder="Menü Adı">\n' +
                    '                        <input type="text" name="url[]" val="'+ x +'" placeholder="Menü Linki">\n' +
                    '                    </div>' +
                    '<div class="sub-menu"><ul></ul></div>\n' +
                    '                    <a href="#" class="add-submenu btn">Alt Menü Ekle</a>\n' +
                    '                </li>');
                e.preventDefault();
            });

当我单击“添加菜单”按钮时，我想传输输入的值。

标签： javascriptjquery

解决方案

value 是 true 属性而不是 val。

你也忘记了一个括号。

$(function(){
  var x = $('.menu-url').val();
  $('#add-menu').on('click', function (e) {
    $('#menu').append(
        `<li>
          <div class="menu-item">
            <a href="#" class="delete-menu">
              <i class="fa fa-times"></i>
            </a>
            <input type="text" 
              name="title[]" 
              placeholder="Menü Adı"> 
            <input type="text" 
              name="url[]" 
              value="${x}" 
              placeholder="Menü Linki">
          </div>' +
          <div class="sub-menu"><ul></ul></div>
          <a href="#" class="add-submenu btn">Alt Menü Ekle</a>              </li>`);
    e.preventDefault();
    })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="menu-url" value="i am here"
  placeholder="menu url"> 
<button id="add-menu">add menu</button>
<div id="menu"></div>

推荐阅读