点击anchor-toggle元素时对匹配data-toggleable值的对象执行代码实现咨询

刚好做过类似的需求，给你一套完整的解决方案，一步步来：

我们需要完成两个关键动作：

• 点击.anchor-toggle时，精准匹配对应data-toggleable值的.modal
• 首次点击该模态框时，把预存在data-src里的地址赋值给iframe的src，触发内容加载；同时处理模态框的显示/隐藏状态

第一步：补全你已有的预加载阻止代码（如果还没写完） #

首先确保页面加载时，已经把iframe的src迁移到data-src并移除原属性，阻止预加载：

$(document).ready(function() {
  // 遍历所有模态框里的iframe，迁移src到data-src
  $('div.modal iframe').each(function() {
    const originalSrc = $(this).attr('src');
    $(this).data('src', originalSrc).removeAttr('src');
  });
});

第二步：实现点击匹配与加载逻辑 #

接下来给所有.anchor-toggle绑定点击事件，完成匹配、加载和显示控制：

$(document).ready(function() {
  // 上面的迁移代码...（如果已经写了就保留）

  // 绑定点击事件到触发按钮
  $('.anchor-toggle').on('click', function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为（根据你的页面需求调整）
    
    // 获取当前按钮的data-toggleable值
    const toggleId = $(this).data('toggleable');
    // 找到对应匹配值的模态框
    const targetModal = $(`div.modal[data-toggleable="${toggleId}"]`);
    const targetIframe = targetModal.find('iframe');

    // 切换模态框的显示/隐藏状态
    if (targetModal.is(':visible')) {
      targetModal.hide();
    } else {
      targetModal.show();
      // 仅当iframe还未加载时，赋值src触发加载
      if (!targetIframe.attr('src')) {
        targetIframe.attr('src', targetIframe.data('src'));
      }
    }
  });
});

额外优化建议 #

1. 初始隐藏模态框：给模态框加CSS初始隐藏，避免页面加载时显示：

div.modal {
  display: none;
  /* 可以添加你的模态框样式：比如固定定位、背景遮罩、宽高设置等 */
}

2. 优雅的动画效果：把show()/hide()换成fadeToggle()或slideToggle()，实现平滑过渡：

// 替换原来的show/hide
targetModal.fadeToggle();

3. 增强用户体验：添加外部点击关闭、ESC键关闭的逻辑：

// 点击模态框外部关闭
$(document).on('click', function(e) {
  const isModal = $(e.target).closest('.modal').length;
  const isToggleBtn = $(e.target).hasClass('anchor-toggle');
  if (!isModal && !isToggleBtn) {
    $('.modal:visible').hide();
  }
});

// ESC键关闭模态框
$(document).on('keydown', function(e) {
  if (e.key === 'Escape') {
    $('.modal:visible').hide();
  }
});

内容的提问来源于stack exchange，提问作者warm__tape