0

假设我有 10 个具有唯一 ID 的 div。当我单击每个元素中的一个元素时，我希望显示一个覆盖 div 并根据原始 div 的 ID 在其中填充内容。

这样做更好吗：

$('#inventory > div').find('i.icon-plus').on('click', function(){
    $('#add-item').slideDown(100);
    if ( $(this).parent('div').attr('id') == '#id1' ) {
        // load unique template
        // or
        // create form content here
    }
    else if ( $(this).parent('div').attr('id') == '#id2' ) {
        // load other unique template
        // or
        // create other form content here
    }

    ...

    else if ( $(this).parent('div').attr('id') == '#id10' ) {
        // load other unique template
        // or
        // create other form content here
    }
});

或者：

$('#inventory > div#id1').find('i.icon-plus').on('click', function(){
    $('#add-item').slideDown(100);
    // load unique template
    // or
    // create form content here
});
$('#inventory > div#id2').find('i.icon-plus').on('click', function(){
    $('#add-item').slideDown(100);
    // load unique template
    // or
    // create form content here
});

...

$('#inventory > div#id10').find('i.icon-plus').on('click', function(){
    $('#add-item').slideDown(100);
    // load other unique template
    // or
    // create other form content here
});

?

基本上我要问的是：只有一个带有大量 if/else 语句的事件处理程序更好，还是有大量没有 if/else 语句的事件处理程序更好，或者甚至没有关系？

4

3 回答 3

2

我建议您使用on将事件处理程序委托给父级，从而避免 jQuery 必须为每个i.icon-plus.

然后使用带有 id 的处理程序映射作为运行其相应代码的函数的键。这样，您就不会附加很多 if 语句。

每个“案例”可能包含重复的代码，如果我们知道，可以进一步优化。但是由于我们不知道映射函数的每个块的作用，所以下面是通用代码，它应该服务于相同的目的：

//add handles here, with id as the key and a 
//corresponding function that does what its supposed to do
var handles = {
  '#id1' : function(){/*do something*/},
  '#id2' : function(){/*do something*/},
  ...
}

//let's cache this one as well
var addItem = $('#add-item');

$('#inventory > div').on('click','i.icon-plus', function(e){

    //get the corresponding handler
    var handler = handles[$(this).parent('div').attr('id')];

    //return if the handler isn't defined for this id
    if(!handler) return;

    //otherwise, execute. the context and arguments are passed on
    addItem.slideDown(100);
    handler.apply(this,arguments);
});

如果#inventory > div我们的委托目标所引用的 div与 的 div 相同，则可以进一步优化这一点$(this).parent('div')。如果是这样，可以替换它以减少函数调用：

$(this).parent('div').attr('id')

//can be replaced by

$(e.delegateTarget).attr('id')
于 2013-04-18T19:24:27.787 回答
1

Try this:

$("#inventory").children("div").on("click", "i.icon-plus", function (e) {
    console.log(e.delegateTarget.id);
    // Do your logic based on e.delegateTarget.id
});

DEMO: http://jsfiddle.net/7kyGP/

This binds one event to each of the "parent" (target) <div> elements. You use .parent() in your code, but you use .find() to get the <i>. That's kind of contradicting because .find() gets descendants...therefore .parent() won't necessarily be what you think it is if the <i> is nested. With this code, the <i> elements don't have to be immediate children - they can be descendants.

Inside the handler, this refers to the specific <i> element clicked, while e.delegateTarget refers to the element that the event is actually bound to - the children <div>s of #inventory. Of course, you can use jQuery to manipulate the target with $(e.delegateTarget).

于 2013-04-18T19:21:44.873 回答
0

我怀疑这里有一种更通用的方法 - 如果您可以将所需的数据添加为属性以允许您加载唯一的模板或创建表单内容，那么就不需要大量的 if 语句或多个事件处理程序。

HTML

<div id="inventory">
    <div id="id1" data-template-url="subform1.htm">
        ... some content
        <i class="icon-plus"></i>
    <div>
    <div id="id2" data-template-url="subform2.htm">
        ... some content
        <i class="icon-plus"></i>
    <div>
    <div id="id3" data-panel-id="panel3">
        ... some content
        <i class="icon-plus"></i>
    <div>
</div>

<div id="panel3" class="hide-until-required">
... panel content
</div>

JAVASCRIPT

$('#inventory > div').find('i.icon-plus').on('click', function() {
    $('#add-item').slideDown(100);

    var templateUrl = $(this).parent('div').attr('data-panel-id');
    // or 
    var panelId = $(this).parent('div').attr('data-template-url');

    // do something with template or panel data
});
于 2013-04-18T19:26:39.213 回答