jQuery动态主/子类别选择器

Question

jQuery动态主/子类别选择器

4

第一点 - 我试图让每个post-item实例分别运行.container函数的子类别，但是如您所见，只有第一个实例处理子类别。
第二点 - 我想将sub-item中的一个设置为menu项下方，并在切换时显示其子类别项列表。

现在我将预选的menu项目设置为属于主要类别cat1的子类别"comb"。

<label class="sub-btn" for="comb">
<input class="sub-input" id="comb" type="radio" name="radios" />
</label>

我无法确定如何将它与主分类连接，并使其像选择一样运行。想法是在每个实例的菜单上仅显示预选的子项，主分类会自动设置以反映这一点，同一类别中其他子项的类型列表也能够在初始加载时进行切换（就像您进行主分类选择时所做的那样）。 https://codepen.io/moofawsaw/pen/rvdqgv

- Kyle Underhill

你的代码太混乱了，我真的不明白你想做什么。请解释一下这个任务的逻辑。 - Saeed

你能澄清一下你的第二点吗？当我点击菜单时，我看到了子类别。 - Jonathan Chaplin

@JonathanChaplin 目前子菜单已经打开，但是除非您先点击主要类别，否则其他类别不会出现。 - Kyle Underhill

你有很多放错位置和未关闭的HTML标签，这些问题会影响你的JS。将你的代码通过https://validator.w3.org/运行一遍，你就会明白我在说什么了。 - Jonathan Chaplin

代码还没有按照问题要求设置好功能。我正在寻找一个答案，帮助确定如何安排代码以实现我的要求。 - Kyle Underhill

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sally CJ · Accepted Answer

问题主要出现在这里：

$(".container").on("change", ".sub-btn", function() {
  var t = $(this).closest(".sub-btn");
  $(".menu-text").text(t.find("span").text());
  var pathA = t.find("#patha").attr("d");
  $(".pathainitial").attr("d", pathA);
  var pathAc = t.find("#patha").attr("fill");
  $(".pathainitial").attr("fill", pathAc);
});

更具体地说，$(".menu-text") 和 $(".pathainitial") 包括所有匹配元素而不考虑其容器。

更新

以下是更新后的JS代码（不是全部代码，而只针对问题中的第一和第二点）：

// Switches the clicked item in `.type-list` with the active item in `.menu`.
$(".type-list").on("click", ".sub-input", function() {
  var t = $(this).closest(".sub-btn"),           // the currently clicked item
      m = t.closest('.type-list').prev('.menu'), // the currently active item
      i, i2, tt, mt, tdiv, mdiv, tcat, io;

  // For the currently clicked item.
  i = t.find('path:first-child');
  tt = t.find('.sub-icon > b');
  tdiv = t.parent('.sub-list');
  tcat = tdiv.attr('data-for');

  // For the currently active item.
  i2 = m.find('path:first-child');
  mt = m.find('.sub-icon > b');
  mdiv = m.children('.sub-item');
  // Save the attributes or text before we modify them.
  io = {
    d: i2.attr('d'),
    fill: i2.attr('fill'),
    text: mt.text(),
    cat: mdiv.attr('data-for')
  };

  mdiv.attr('data-for', tcat);
  mt.text(tt.text());
  i2.attr("d", i.attr('d'))
    .attr("fill", i.attr('fill'));

  tdiv.attr('data-for', io.cat);
  tt.text(io.text);
  i.attr('d', io.d)
    .attr('fill', io.fill);

  // Put the item in its own category.
  if (tcat !== io.cat) {
    tdiv.removeClass('active');
    tdiv.closest('.sub-item')
      .removeClass(tcat)
      .addClass(io.cat);
  }
});

演示： https://codepen.io/anon/pen/xjNLdb

注意事项：

每个.sub-icon的HTML应为：

<span class="sub-icon">
    <svg ...></svg><br>
    <b>Text here</b>
</span>

即将Text here放在一个b元素中。

.menu中的.sub-item应该有一个data-for，其值为活动类别关键字/class（例如： cat1）:

<div class="sub-item edit current" data-for="cat1">
    ...
</div>

在预选类别的.cat-dropdown-menu中，.cat-item应该在其class中有一个active；例如：

<label class="cat-item active" style="color:blue">
    ...
</label>