能否存储含类与z-index的元素？jQuery移动端按钮定位咨询

1. 能否在变量中存储带有类（class）和z-index属性的内容？ #

当然可以！根据你的使用场景，有几种灵活的存储方式：

• 存储为配置对象：把类名和z-index值作为键值对存到对象里，方便后续复用和修改：

  const elementConfig = {
    className: 'nav-btn active',
    zIndex: 15
  };
  // 后续可以直接应用到元素上
  $('#work .nav-btn').addClass(elementConfig.className).css('z-index', elementConfig.zIndex);
  

• 存储jQuery元素对象：如果是DOM中已存在的元素，直接把jQuery选择结果存在变量里，它会保留元素的所有类和样式属性（包括z-index）：

  const $workBtn = $('#work .nav-btn');
  // 随时可以获取或修改它的类和z-index
  const currentZIndex = parseInt($workBtn.css('z-index'), 10);
  $workBtn.addClass('clicked').css('z-index', currentZIndex + 5);
  

• 存储样式字符串：如果是要批量应用的固定样式，也可以存在字符串里（灵活性稍弱，但适合简单场景）：

  const btnStyles = 'z-index: 10; color: #fff;';
  $('.nav-btn').attr('style', btnStyles);
  

2. 在jQuery中基于z-index属性打乱导航链接位置是否可行？ #

完全可行！只要先获取每个按钮的当前z-index值，就能基于这个属性实现打乱逻辑。这里给你一个具体的实现思路和代码示例：

前置注意：确保按钮是定位元素 #

z-index只对定位元素生效（position: relative/absolute/fixed/sticky），所以先确认你的按钮CSS里有定位属性，比如：

.nav-btn {
  position: relative; /* 或者其他定位值 */
}

点击事件实现代码 #

// 选中所有导航按钮，简化选择逻辑
const $navBtns = $('.nav-btn');

// 给每个按钮绑定点击事件
$navBtns.on('click', function() {
  // 收集每个按钮的jQuery对象和对应的z-index值（转成数字，处理默认auto的情况）
  const btnData = $navBtns.map(function() {
    return {
      $element: $(this),
      zIndex: parseInt($(this).css('z-index'), 10) || 0
    };
  }).get();

  // Fisher-Yates洗牌算法：公平打乱数组顺序
  function shuffleArray(arr) {
    let currentIndex = arr.length;
    while (currentIndex > 0) {
      const randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
      [arr[currentIndex], arr[randomIndex]] = [arr[randomIndex], arr[currentIndex]];
    }
    return arr;
  }

  // 打乱按钮数据数组
  const shuffledBtns = shuffleArray(btnData);

  // 基于z-index调整位置（提供两种常见方式）
  // 方式1：打乱DOM顺序，保持z-index不变
  shuffledBtns.forEach(btn => {
    // 将按钮移到其父容器的末尾，实现视觉位置打乱
    btn.$element.appendTo(btn.$element.parent());
  });

  // 方式2：根据z-index值设置具体定位位置（比如z-index越高，按钮越靠上）
  // shuffledBtns.forEach((btn, index) => {
  //   // 用z-index计算top值，可根据需求调整公式
  //   const topPosition = (btn.zIndex * 10) + (index * 5);
  //   btn.$element.css('top', `${topPosition}px`);
  // });
});

关键说明 #

• 用$(element).css('z-index')能获取元素当前计算后的z-index值，但它返回的是字符串，所以要转成数字处理。
• 如果元素未设置z-index，会返回auto，我们用|| 0处理这种情况，避免出现NaN错误。
• Fisher-Yates洗牌算法能保证每个元素被打乱到任意位置的概率相等，是比较公平的打乱方式。

内容的提问来源于stack exchange，提问作者Cam O'Brien