时间戳

首页 > 解决方案 > 如何优化多个点击事件？

javascript - 如何优化多个点击事件？

问题描述

我已经创建了多个在点击时发生的功能，它工作正常，但我只是想知道这是否是最好的方法，或者是否有更好/更流线型的方法。

jsfiddle

例子：

jQuery(document).ready(function($){

/*windows*/ 
$('.window1').on({'click': function(){$('#windows').attr('src','images/windowcolours/windows-anthracite-grey.png') .attr('style','display:block;');}});
$('.window2').on({'click': function(){$('#windows').attr('src','images/windowcolours/window-jet-black.png') .attr('style','display:block;');}});
$('.window3').on({'click': function(){$('#windows').attr('src','images/windowcolours/windows-slate-grey.png') .attr('style','display:block;');}});
$('.window4').on({'click': function(){$('#windows').attr('src','images/windowcolours/windows-cream.png') .attr('style','display:block;');}});
$('.window5').on({'click': function(){$('#windows').attr('src','images/windowcolours/windows-silver-grey.png') .attr('style','display:block;');}});

标签： javascriptjquery

解决方案

您的小提琴链接不起作用，但是我可以从 JS 逻辑的上下文中看到您可以将其干燥。

首先对所有元素使用一个公共类，然后使用一个data属性来存储每个元素的自定义元数据。然后，您可以为所有这些元素分配一个单击事件处理程序，如下所示：

<div class="window" data-src="images/windowcolours/windows-anthracite-grey.png">Foo</div>
<div class="window" data-src="images/windowcolours/window-jet-black.png">Foo</div>
<div class="window" data-src="images/windowcolours/windows-slate-grey.png">Foo</div>
<div class="window" data-src="images/windowcolours/windows-cream.png">Foo</div>
<div class="window" data-src="images/windowcolours/windows-anthracite-grey.png">Foo</div>

var $windows = $('#windows');

$('.window').on('click', function() {
  $windows.prop('src', $(this).data('src')).show();
});

还要注意使用show()过度显式设置display: blockusing css()。

推荐阅读