点击.moveright按钮时关联音频div无法移动的问题排查

代码中的核心问题 #

• 错误1：获取图片类名的目标元素错误
  你用$('.moveright').first('div.c img.r')是从页面所有.moveright按钮中查找第一个匹配的图片，这和当前点击按钮所属的div.c完全无关。应该基于当前点击的按钮，定位到它所在的div.c里的图片：

  const imgClasses3 = $(this).closest('div.c').find('img.r').attr('class');
  

• 错误2：语法错误（括号未闭合）
  最后一行代码的insertAfter方法缺少闭合括号，导致代码无法正常执行：
  原错误代码末尾：

  $($(selector3).closest('div.aud')).insertAfter($($(selector3).closest('div.aud')).next('div.aud');
  

  需补上最后的)：

  $(selector3).closest('div.aud').insertAfter($(selector3).closest('div.aud').next('div.aud'));
  

• 额外优化：避免重复DOM查询
  原代码多次重复查询同一个元素，既冗余又影响性能，可将查询结果存为变量复用，比如：

  const currentAudDiv = $(selector3).closest('div.aud');
  currentAudDiv.insertAfter(currentAudDiv.next('div.aud'));
  

修正后的完整代码 #

$('.parent').on('click', '.moveright', function() {
  // 处理图片所在的div.c移动
  const currentCDiv = $(this).closest('div.c');
  const nextCDiv = currentCDiv.next('div.c');
  if (nextCDiv.length) { // 仅当存在下一个div.c时执行移动
    currentCDiv.insertAfter(nextCDiv);
  }

  // 处理对应音频的div.aud移动
  const imgClasses3 = currentCDiv.find('img.r').attr('class');
  const selector3 = 'audio.' + imgClasses3.split(' ').join('.'); 
  const currentAudDiv = $(selector3).closest('div.aud');
  const nextAudDiv = currentAudDiv.next('div.aud');
  if (nextAudDiv.length) { // 仅当存在下一个div.aud时执行移动
    currentAudDiv.insertAfter(nextAudDiv);
  }
})

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