为单独的DOM元素定义一个jQuery函数

Defining a single jQuery function for separate DOM elements

本文关键字：一个 jQuery 函数 单独 DOM 元素 定义      更新时间：2023-09-26

我有几个jQuery点击函数-每个函数都附加到不同的DOM元素，做的事情略有不同。。。

例如，一个打开和关闭字典，然后更改文本。。。

$(".dictionaryFlip").click(function(){
    var link = $(this);
    $(".dictionaryHolder").slideToggle('fast', function() {
        if ($(this).is(":visible")) {
            link.text("dictionary ON");
        }
        else {
            link.text("dictionary OFF");
        }
    });
});

HTML

        <div class="dictionaryHolder">
            <div id="dictionaryHeading">
                <span class="dictionaryTitle">中 文 词 典</span> 
                    <span class="dictionaryHeadings">Dialog</span>
                    <span class="dictionaryHeadings">Word Bank</span>                       
            </div>
        </div>
<p class="dictionaryFlip">toggle dictionary: off</p>

我想做的每件事都有一个单独的点击功能…

有没有一种方法可以定义一键式函数并将其分配给不同的DOM元素？然后可能使用if else逻辑来更改函数内部的操作？

谢谢！

澄清：

我有一个click功能：1）打开和关闭字典，2）打开和禁用菜单，3）打开和关掉小地图。。。等等。只是想通过将所有这些组合成一个单击函数

来减少代码

您当然可以定义一个函数并在多个HTML元素上使用它。这是一种常见的模式，如果可能的话，应该加以利用！

var onclick = function(event) {
    var $elem = $(this);
    alert("Clicked!");
};
$("a").click(onclick);
$(".b").click(onclick);
$("#c").click(onclick);
// jQuery can select multiple elements in one selector
$("a, .b, #c").click(onclick);

也可以使用data-自定义属性存储元素的上下文信息。jQuery有一个很好的.data函数（它只是.attr的前缀代理），允许您轻松设置和检索元素上的键和值。假设我们有一个人员列表，例如：

<section>
    <div class="user" data-id="124124">
        <h1>John Smith</h1>
        <h3>Cupertino, San Franciso</h3>
    </div>
</section>

现在，我们在.user类上注册一个点击处理程序，并获取用户的id：

var onclick = function(event) {
    var $this = $(this), //Always good to cache your jQuery elements (if you use them more than once)
        id = $this.data("id");
    alert("User ID: " + id);
};
$(".user").click(onclick);

这里有一个简单的模式

function a(elem){
    var link = $(elem);
    $(".dictionaryHolder").slideToggle('fast', function() {
        if (link.is(":visible")) {
            link.text("dictionary ON");
        }
        else {
            link.text("dictionary OFF");
        }
    });
}
$(".dictionaryFlip").click(function(){a(this);});
$(".anotherElement").click(function(){a(this);});

好吧，你可以做一些类似的事情：

var f = function() {
  var $this = $(this);
  if($this.hasClass('A')) { /* do something */ }
  if($this.hasClass('B')) { /* do something else */ }
}
$('.selector').click(f);

因此，在f函数中，您可以检查点击元素的类别

根据这一点，做你希望的事情

为了获得更好的性能，您只能为页面分配一个事件侦听器。然后，使用event.target来知道点击了哪个部分以及要做什么

我会将每个操作放在一个单独的函数中，以保持代码的可读性。

我还建议您使用每个可点击项目的唯一Id。

$("body").click(function(event) {
    switch(event.target.id) {
    // call suitable action according to the id of clicked element
        case 'dictionaryFlip':
            flipDictionnary()
        break;
        case 'menuToggle':
            toggleMenu()
        break;
        // other actions go here
    }
});
function flipDictionnary() {
    // code here
}
function toggleMenu() {
    // code here
}

cf。使用jQuery的事件委派http://www.sitepoint.com/event-delegation-with-jquery/

相关文章：