Question

我在页面上有三个按钮，我想根据每个click事件更新变量的值。我做了以下类似的事情，但是我认为这不是正确的方法，我需要遵循最佳实践的通用方法，但是我不知道该怎么做。非常感谢您的帮助。

 $('#digital_story_cover_image #imageset-fancybox').click(function() {
     list = $('.cover-image');
 });

 $('#gallery_main_images #imageset-fancybox').click(function() {
     list = $('.gallery-images');
 });

 $('#gallery_main_images #multi-imageset-fancybox').click(function() {
     list = $('.gallery-images');
 });

谢谢。

Answer 1

我们可以尝试避免使用多行代码。

只需为所有选择器编写事件单击事件处理程序即可。像下面一样

$('#digital_story_cover_image #imageset-fancybox, #gallery_main_images #imageset-fancybox, #gallery_main_images #multi-imageset-fancybox').click(function(e) {
     list = $($(e).parent().attr('data-list-selector'));
 });

，并且可以在html的相应父级中添加属性data-list-selector。

喜欢

id为digital_story_cover_image的div添加属性data-list-selector =“。cover-image”同样也适用于其他父母。

Answer 2

像这样可以更轻松地调用这些访问器。

require 'uri'
URI("http://www.mydomain.qwe/directory").path
# => "/directory"

可以对此处看到的所有访问者执行相同的操作。例如

const digId = $('#digital_story_cover_image #imageset-fancybox');

digId.click(function() {
     list = $('.cover-image');
 });

const galId = = $('#gallery_main_images #imageset-fancybox');

galId.click(function() {
     list = $('.gallery-images');
 });

const galIdMulti = $('#gallery_main_images #multi-imageset-fancybox');

galIdMulti.click(function() {
     list = $('.gallery-images');
 });

Answer 3

这对我来说也很好，就像@Lloyd Nicholson所说：它定义了某些结果，并且它们都是特定于您的项目所需的。

但是，您可以对其进行重构，最终仅发生两次单击事件，如下所示：

 $('#digital_story_cover_image #imageset-fancybox').click(function() {
     list = $('.cover-image');
 });

 $('#gallery_main_images #imageset-fancybox, #gallery_main_images #multi-imageset-fancybox').click(function() {
     list = $('.gallery-images');
 });

由于您实际上在最近的两个事件中执行相同的操作，因此可以对多个选择器使用相同的“单击事件”，并在它们之间使用逗号。

*我认为最好提供您的代码并就您的问题进行更多说明，以便我们提供更好的答案。我希望这是您所需要的。

基于点击事件的Javascript更新值

3 个答案: