WordPress中使用jQuery实现多行可点击div的问题求助

嘿，我完全懂你这种只会CSS，碰HTML/JS就发懵的处境😂 你遇到的问题其实很常见——复制多段jQuery代码后只有第一个div能点击，大概率是因为重复的代码逻辑冲突，或者你之前的写法是针对单个元素绑定，没考虑批量处理的情况。下面给你一个简单、不用重复写代码的解决方案，适合你这种JS新手：

步骤1：给需要点击的行添加通用类和自定义链接属性 #

在Visual Composer编辑每行的时候，找到「自定义CSS类」的输入框，给所有需要点击的行都加上同一个通用类，比如 clickable-row。

然后，在同一行的「自定义属性」（或者有些版本叫「HTML属性」）里，添加一个自定义属性：

• 属性名：data-link
• 属性值：你要跳转的完整URL（比如 https://your-target-page.com）

步骤2：添加一段通用的jQuery代码（只需要加一次！） #

不用复制多段代码，只需要把下面这段代码添加到你的WordPress里就行：

jQuery(document).ready(function($) {
  // 给所有带clickable-row类的元素绑定点击事件
  $('.clickable-row').on('click', function() {
    // 获取当前元素的data-link属性值
    var targetUrl = $(this).data('link');
    // 如果有链接，就跳转
    if (targetUrl) {
      window.location.href = targetUrl;
    }
  });

  // 可选：防止点击行内的按钮/链接时触发整行跳转
  $('.clickable-row a').on('click', function(e) {
    e.stopPropagation();
  });
});

怎么加这段代码？ #

你可以选下面任意一种方式：

• 用Visual Composer的「自定义HTML」模块，把代码放在 <script> 标签里，加到页面的底部；
• 进入WordPress后台「外观」→「自定义」→「额外JavaScript」，直接粘贴这段代码；
• 如果你的主题有自定义JS的输入框，也可以放在那里。

步骤3：添加CSS让用户知道这行可点击 #

为了让访客看出来这行是能点击的，加一点CSS：

.clickable-row {
  cursor: pointer;
}

这段CSS可以加到「外观」→「自定义」→「额外CSS」里。

为什么这个方法能解决你的问题？ #

之前你复制多段代码，每段都单独绑定一个类，很容易因为代码重复、变量冲突或者DOM加载顺序问题，导致只有第一个绑定生效。而这个方法用通用类+自定义数据属性，一段代码就能处理所有需要点击的行，每个行的链接存在自己的data-link里，互不干扰，也不用重复写代码，对你这种JS新手友好很多。

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