Question

我有几个功能，点击委托给.container的事件（这是动态生成的）

    $('.Container').on('click', '.a', function(){$(document).Function1();});
    $('.Container').on('click', '.b', function(){$(document).Function2();});
    $('.Container').on('click', '.c', function(){$(document).Function3();});
    $('.Container').on('click', '.d', function(){$(document).Function4();});
    $('.Container').on('click', '.e', function(){$(document).Function5();});
    $('.Container').on('click', '.f', function(){$(document).Function6();});

效果很好，但如何将所有这些调用汇总到一个on("click"事件中？

Answer 1

HTML

<div data-fav-animal="pig"></div>
<div data-fav-animal="horse"></div>
<div data-fav-animal="cow"></div>

Jquery的

$('.Container').on('click', '[data-fav-animal]', function()
{
    var myFav = $(this).data('fav-animal');
    WhichFunction(myFav);
});

function WhichFunction(faveAnimal){
    switch(faveAnimal) {
    case 'pig':
        doThis();
        break;
    case 'cow';:
        doThat();
        break;
    default:
        doThatOtherThing();
    } 
return;
}

使用类似数据属性的内容可以让您获得更多控制权。您可以删除字母类和选择器，甚至使用数据属性。

也可以使用Enums消除所有硬编码字符串。

$('.Container').on('click', '.a, .b, .c, .d, .e, .f', function()
{
    var myFav = $(this).data('fav-animal');
    WhichFunction(myFav);
});

如果类必须保留在DOM元素上。

var functionName = "blah";
window[functionName]();

只需知道其名称，即可在全局范围内执行函数。这将允许您删除上面代码中的开关并保持/获得灵活性。

Answer 2

您可以按照。

的模式执行此操作

$('.Container').on('click', '.a, .b', function(){
    var $this = $(this);

    if ($this.hasClass('a')) {
      //do something
    } else if ($this.hasClass('b')) {
      //do something
    }
});

权衡是你将条件从子选择器移动到逻辑本身。有些人可能认为这会降低可读性，虽然我也可能在那个阵营中，但确实可以这样做。

Answer 3

这有点工作：

let elements = ['.a', '.b', '.c', '.d', '.e', '.f']

let funcs = {};

// create Function1...6
for (let i=0; i < elements.length; i++) {
  funcs['Function'+(i+1)] = function() { console.log(elements[i]); }
}

$('.Container').on('click', elements.join(', '), function(e) {
  funcs[`Function${(elements.indexOf('.'+e.target.className)+1)}`]()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="Container">
  <li class="a">a</li>
  <li class="b">b</li>
  <li class="c">c</li>
  <li class="d">d</li>
  <li class="e">e</li>
  <li class="f">f</li>
</ul>

如果您正在寻找，请告诉我。

总结委派的单击事件函数Jquery

3 个答案: