合并多个点击事件

Question

抱歉，如果标题不准确。不确定如何正确描述它。

我有这个，效果很好：

$(document).on('click', '.flrapPM01', function(event) { 
    toggleDiv('premiereModal01');
});

$(document).on('click', '.flrapPM02', function(event) { 
    toggleDiv('premiereModal02');
});

$(document).on('click', '.flrapPM03', function(event) { 
    toggleDiv('premiereModal03');
});

但是我想把上面的合并成一个外部的js文件

据我所知：

function fireModal() {
    .on('click', '.flrapPM01', function(event) {toggleDiv('premiereModal01');});
    .on('click', '.flrapPM02', function(event) {toggleDiv('premiereModal02');});
    .on('click', '.flrapPM03', function(event) {toggleDiv('premiereModal03');});
}

如何确保 'click' 在移动设备上触摸时有效？

提前致谢！

Answer 1

您可以通过多种不同的方式轻松地做到这一点。使用您当前的代码，您可以使用 '.flrapPM01, .flrapPM02, .flrapPM03' 或 '[class*=flrapPM]' 等选择器，然后您可以使用简单的正则表达式从 class 中提取数字（例如 /(?!flrapPM)\d+/） .不过，老实说，如果您可以控制标记，我会考虑使用数据属性并以这种方式传递 ID。无论如何，这是一个简单的例子：

$(document).on('click', '[class*=flrapPM]', function(event) { 
    var num = this.className.match(/(?!flrapPM)\d+/);
    toggleDiv('premiereModal' + num);
});

function toggleDiv(which) {
    alert(which);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="flrapPM01 btn other class">PM01</button>
<button class="something flrapPM02">PM02</button>
<button class="flrapPM03">PM03</button>

合并多个点击事件

Consolidate Multiple Click Events

jquery

click

jquery-mobile