Question

我创建了多个功能来进行点击，效果很好，但是我只是想知道这是否是最好的方法，或者是否有更好/更合理的方法。

示例：

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;');}});

Answer 1

您的小提琴链接不起作用，但是从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: block的情况下使用css()。

如何优化多个点击事件？

1 个答案: