如何将一个函数用于多个元素

How to use a function for multiple elements?

本文关键字：函数 用于 元素 一个      更新时间：2023-09-26

我创建了一个可拖动的框。您可以在下面看到我的代码：

// To change the position of pop-up
function handle_mousedown(e){
    window.my_dragging  =  {};
    my_dragging.pageX0  =  e.pageX;
    my_dragging.pageY0  =  e.pageY;
    my_dragging.elem    =  $(".fast_login_form");
    my_dragging.offset0 =  $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }
    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}
	// make draggable 'fast login form'
	$(".fast_login_form_header").mousedown(handle_mousedown);
.fast_login_form{
  border: 2px solid gray;
  width: 250px;
  height: 100px;
}
.fast_login_form_header{
  text-align: center;
  border-bottom: 1px solid gray;
  cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fast_login_form">
    <div class="fast_login_form_header"> click and hold and move </div>
</div>

上面的代码也可以，但根据这一行，它只适用于一个盒子：

my_dragging.elem  =  $(".fast_login_form");

现在我想知道，我怎样才能为每个盒子实现该功能？不只是.fast_login_form？实际上，我想知道如何将$(".fast_login_form")作为参数传递给该函数？

换句话说，我想在HTML中创建另一个这样的框：

<div class="another_fast_login_form">
    <div class="fast_login_form_header"> click and hold and move </div>
</div>

我也想让它变得可拖动。我可以为它们编写两次这些代码，但我想知道如何将这些代码用于多个盒子？

使用 $(this).closest('.fast_login_form') 而不是 $('.fast_login_form') 

// To change the position of pop-up
function handle_mousedown(e){
    window.my_dragging  =  {};
    my_dragging.pageX0  =  e.pageX;
    my_dragging.pageY0  =  e.pageY;
    my_dragging.elem    =  $(this).closest('.fast_login_form');
    my_dragging.offset0 =  $(this).offset();
    function handle_dragging(e){
        var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
        var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
        $(my_dragging.elem)
        .offset({top: top, left: left});
    }
    function handle_mouseup(e){
        $('body')
        .off('mousemove', handle_dragging)
        .off('mouseup', handle_mouseup);
    }
    $('body')
    .on('mouseup', handle_mouseup)
    .on('mousemove', handle_dragging);
}
	// make draggable 'fast login form'
	$(".fast_login_form_header").mousedown(handle_mousedown);
.fast_login_form{
  border: 2px solid gray;
  width: 250px;
  height: 100px;
}
.fast_login_form_header{
  text-align: center;
  border-bottom: 1px solid gray;
  cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fast_login_form">
    <div class="fast_login_form_header"> click and hold and move </div>
</div>
<div class="fast_login_form">
    <div class="fast_login_form_header"> click and hold and move </div>
</div>

只需使用选择器来选择所有可拖动元素，例如给它们一个类draggable并使用$(".draggable")选择它们。而不是使用全局变量（window.my_dragging），使用局部变量var my_dragging，因此它对每个元素都是唯一的。

为什么不直接创建一个新类"可拖动"，将其添加到您想要可拖动的任何元素中，并切换您的选择器以使用 

my_dragging.elem  =  $(".draggable");
相关文章：