时间戳

首页 > 解决方案 > 使用数据属性对项目进行排序

javascript - 使用数据属性对项目进行排序

问题描述

此函数根据main categories和对项目进行排序sub-categories。如果[data-color]是 ，则将主类别的 赋予子类别文本的颜色clicked。下面引号中的代码显示了处理子类别按钮点击的代码部分。

代码的期望行为是：如果单击sub-category button这些子类别的项目显示。如果在它处于活动状态时再次单击它，则每个项目都会显示在该主类别下。

问题： 有时如果您单击 asub-category button然后单击另一个，项目不会立即排序，并且[data-color]不会传输到sub-category button.

如果您删除注释下的行/取消选中所需的/单击工作正常，但双击该项目不会删除子类别选择。

我如何sub-category buttons每次都点击工作并保持第二次点击子类别的能力，以通过重新处理下面引用中的代码来删除它的选择？

$(document).on("click", ".sub-cat-button", function(e) {
  e.preventDefault();
  if ($(this).attr("data-show-main") == "hide") {
    /*required for unchecking*/
    $(".cat-button.focus").trigger("click");
    $(this).attr("data-show-main", "show");
  } else 

  if ($(this).attr("data-show-main") == "show") {
    $(this).attr("data-show-main", "hide");
  } else {
    /*also required for unchecking*/
    $(this).attr("data-show-main", "hide");
  }
});

这是一个代码笔。该代码使用 cookie，不会在片段中运行。

https://codepen.io/moofawsaw/pen/jXMPme

标签： javascriptjquery

解决方案

推荐阅读