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]'之类的选择器，然后您可以使用简单的正则表达式从类中提取数字（例如/(?!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>

合并多个单击事件

1 个答案: