3

这里真的很基本的东西。我想给一个点击函数一个名字并为其分配一些参数。目标是代码可重用性，这样我就可以只为常见任务编写一个通用函数，例如使用户能够删除各种数据。

这是一个jsfiddle向您展示我的意思。

这是代码：

的HTML：

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>

和JS：

// this function would be loaded on my site's template and therefore would be available across my entire site.
function deleteThis(data_id){           
   $('button').on('click', 'button', function(){
      $('div[data-id="'+data_id+'"]').hide();  
   });
}  

var clicked_id=3;
function deleteThis(clicked_id); 
// this function would be called on the various pages where users can delete things and this variable, clicked_id, would be assigned=3 by the user's action on that page.

如何给这个按钮点击事件一个名字？

更新谢谢大家！$('button')应该是或$(document.body)按钮的父元素。如果您进行简单的更改，它就会起作用。您也可以按照 Michael Buen 下面的建议进行操作。

4

6 回答 6

2

只需重构您的代码，将删除功能放在自己的功能上

<button>delete this</button>
<div data-id="3" class="delete">something bad</div>
<div data-id="4" class="delete">something else bad</div>
​

$('button').on('click', function() { deleteImmediately(3) });

function deleteImmediately(id) { -- refactored code
    $('div[data-id='+id+']').hide();  
}​

现场测试：http: //jsfiddle.net/e2kuj/2/

于 2012-04-20T00:44:33.060 回答
1

在您的提琴手中，将(function deleteThis(){})()其设为私有，并且您正尝试将其作为全局访问！

于 2012-04-20T00:05:12.880 回答
1

这几乎是对的。我更新了它-> http://jsfiddle.net/fz5ZT/41/

function deleteThis(id){
    $('button').click(function(){
        $('div[data-id="'+id+'"]').hide();  
    });    
};
deleteThis(3);​
于 2012-04-20T00:07:42.097 回答
1

我认为你误解了事件。deleteThis 只有在处理程序中才有意义。

更正的 HTML：（不要使用自定义属性来引用 HTML - 它们更慢）

<button>delete this</button>
<div id="del_3" class="delete">something bad</div>
<div id="del_4" class="delete">something else bad</div>

JS：（未经测试）

var deleteTargetId = 'del_3'; //clicked_id renamed for clarity

function deleteThis(targetId){
    $('#'+targetId).remove(); //removes rather than hides the html
}

$('button').click( function(){
    deleteThis(deleteTargetId);
} );

现在您可以交换 deleteTarget 并且具有该 ID 的 HTML 会被 yoinked。

但是，如果这是家庭作业，我想知道您是否理解作业。名为 'clicked_id' 的 var 表明这个想法是单击 div 以使它们消失并使用委托。那很容易。

您需要了解事件委托和事件冒泡才能了解这里发生了什么。基本上，当单击某些内容时，事件会在父元素上触发，然后是该父元素的父元素，一直到 HTML 标记。所有事件都会发生这种情况，并且不会引起您可能认为的麻烦，因为容器很少被分配事件侦听器。链接和按钮更典型地是端点节点，或者最多包含一个跨度或一个图像。通常当冒泡导致问题时，这是因为有人用 HTML 做了一些糟糕的事情，或者他们应该首先使用委托。

'on' 是曾经适当命名且不易混淆的 'delegate' jquery 方法的新名称。本质上，主体中具有“删除”类的任何内容都会触发处理程序。我们不关心 ID，因为我们的想法是杀死被点击的 div，'this' 为我们提供了对它的引用。这对于 JQ 来说是不寻常的行为，因为大多数方法都会在 'body' 处有 'this' 点，但对于事件委托来说，指向它显然更有用。

$('body').on('click', '.delete', function(e){
    $(this).remove(); //this refers to the originally clicked element
} );
//note: not the solution you asked for, but possibly the one you needed.
于 2012-04-20T01:03:00.587 回答
0

您可以只使用$('button').on('click', 'button', clickHandler);来引用该clickHandler函数。

我非常喜欢这些东西，因为除了可重复使用之外，它还具有以下优点。

  • 如果 clickHandler 中存在错误，我将能够发送补丁
  • 有人可以增强我的方法，而匿名方法是不可能的
  • 可读，并且在出现错误时查看堆栈跟踪也很有用

希望有帮助。

更新：

function clickHandler(ev) {
    ev.preventDefault();
    // ... handler code
}
于 2012-04-19T23:55:36.673 回答
0

您可以以不同的方式删除元素：

  $('button').on('click', function(){
      $(this).next("div").remove();
    });

http://jsfiddle.net/fz5ZT/46/

于 2012-04-19T23:57:21.760 回答