Question

我的网站上有5个按钮“免费通话”。悬停在它们上弹出联系表格。我有很多问题：

如何让表单成为页面上唯一的表单？我的意思是，从不同的按钮必须显示相同的形式。（例如，我在一个地方填写表格，当我将鼠标悬停在其他按钮上时，我会看到消息'你已经完成了'或者像那样的事情。）
如何让每个按钮只显示一次显示功能？（下面的代码）

我试图解决这个问题，但我的方法不起作用

HTML 我在页面的不同位置有5个这样的按钮

  function showForm() {
        
            var currentButton = $(this);  
        
            if ( currentButton.find('.popover-form') !== undefined ) {
        
              var freeCallForm = "<form class=\"popover-form free-call-form\"><label for=\"\">Name</label><input type=\"text\">                  <label for=\"\">Phonenum</label><input type=\"text\" value=\"+375\"><button>Call me!</button>                </form>";
            
              currentButton.append(freeCallForm); 
            }
        
        }
    $('.main-btn').on('mouseover', showForm);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="main-btn free-call">
       <p><a href="#">Use free call</a>
       <br/>
       <i class="glyphicon glyphicon-chevron-down"></i>
    </div>

不幸的是，上面的这个功能不起作用。使用 if 我尝试仅在.main-btn没有.popover-form时才使函数正常工作。

另一个问题是，在悬停在不同的按钮上时，无论如何都会为每个按钮添加新表单。我找不到解决这个问题的正确方法。

Answer 1

var isOpen = false;
function showForm() {

        var currentButton = $(this);  

        if ( currentButton.find('.popover-form') !== undefined && !isOpen) {

          var freeCallForm = "<form class=\"popover-form free-call-form\"><label for=\"\">Name</label><input type=\"text\">                  <label for=\"\">Phonenum</label><input type=\"text\" value=\"+375\"><button>Call me!</button>                </form>";
          isOpen = true;
          currentButton.append(freeCallForm); 
        }

    }
$('.main-btn').on('mouseover', showForm);

//on modal close set isOpen back to false

Answer 2

解决方案是append()方法。它移动DOM元素，而不是复制它们（我想是这样）。所以我在<form id="free-call-form">之前将</body>插入到文档的末尾。

JS

function showForm() {

    var currentButton = $(this); 

    if ( ( currentButton.find('.popover-form') !== undefined && !currentButton.existsFreeCall ) ) {

      var freeCallForm = $('#free-call-form');      
      currentButton.append(freeCallForm);
      currentButton.existsFreeCall = true;   

     }
}
$('.main-btn').on('mouseover', showForm);

在此代码中，相同的形式从一个按钮移动到另一个按钮而不复制和多个附加。

悬停时弹出窗体 - 如何使其成为页面上唯一的一个？

2 个答案: