Question

我有几个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）打开和关闭迷你图...等...只是想切通过将所有这些组合成单击功能来实现代码

Answer 1

您当然可以定义单个函数并在多个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);

Answer 2

这是一个简单的模式

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);});

Answer 3

嗯，你可以这样做：

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

$('.selector').click(f);

所以在f函数中你检查点击元素的类是什么

并根据你的意愿做什么

Answer 4

为了获得更好的性能，您只能为页面分配一个事件监听器。然后，使用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
}

比照使用jQuery http://www.sitepoint.com/event-delegation-with-jquery/

的事件委派

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

4 个答案: