如何用jQuery默认选中WordPress Image Swatch插件的红色选项

为什么你的代码无效 #

selectedIndex 是用于 <select> 下拉选择框的属性，a标签不支持这个属性，所以之前的代码对a标签完全不起作用。

正确的jQuery实现方法 #

方法1：模拟点击红色选项（推荐） #

这类颜色选择插件通常会在点击a标签时触发选中逻辑，直接模拟点击红色选项就能实现默认选中：

$(document).ready(function(){
    // 定位到data-value为red-1的a标签并触发点击事件
    $('.image-swatch[data-value="red-1"]').click();
});

方法2：手动添加选中样式类 #

如果模拟点击无效，你可以先查看插件标记选中状态的CSS类（比如active或selected），直接给红色选项添加这个类：

$(document).ready(function(){
    // 先移除所有选项的选中类，避免多个选项同时被选中
    $('.image-swatch').removeClass('active');
    // 给红色选项添加选中类
    $('.image-swatch[data-value="red-1"]').addClass('active');
});

小提示：如果不知道插件的选中类，右键点击手动选中后的红色选项，查看它的CSS类名称，替换上面代码里的active即可。

使用说明 #

1. 将上述代码添加到WordPress主题的functions.php（通过注册脚本的方式），或者直接插入到页面的<script>标签中。
2. 确保页面已加载jQuery（WordPress默认会加载jQuery，除非你手动禁用了）。

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