0

我有几个 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">中 文 词 典&lt;/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）打开和关闭小地图......等等......只是想通过结合所有这些来减少代码成单击功能

4

4 回答 4

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);
于 2013-08-31T00:51:03.967 回答
0

这是一个简单的模式

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);});
于 2013-08-31T00:40:03.853 回答
0

好吧，您可以执行以下操作：

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

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

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

并根据你的意愿去做

于 2013-08-31T00:43:34.637 回答
0

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

于 2013-08-31T13:55:27.450 回答