Question

我使用的比较表在这里：

https://codepen.io/adrianjacob/pen/KdVLXY

当我复制表格并且查看器变为移动响应时；这些按钮仅适用于第一张桌子。

是否有任何类或可以添加到JavaScript和HTML中的类，这样我可以使每组按钮专用于其表？

按钮代码：

<ul>
  <li class="bg-purple">
    <button>Self-Employed</button>
 </li>
  <li class="bg-blue">
    <button>Simple Start</button>
  </li>
  <li class="bg-blue active">
    <button>Essentials</button>
  </li>
  <li class="bg-blue">
    <button>Plus</button>
  </li>

JavaScript代码：

// DIRTY Responsive pricing table JS

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

// Initialize the media query
  var mediaQuery = window.matchMedia('(min-width: 640px)');

  // Add a listen event
  mediaQuery.addListener(doSomething);

  // Function to do something with the media query
  function doSomething(mediaQuery) {    
    if (mediaQuery.matches) {
      $('.sep').attr('colspan',5);
    } else {
      $('.sep').attr('colspan',2);
    }
  }

  // On load
  doSomething(mediaQuery);

非常感谢您的帮助。

Answer 1

尝试一下：

$("ul").on("click", "li", function(e) {
  var $clicked = $(e.currentTarget); // This will give you the clicked <li>
  var $ul = $clicked.parent();
  var $table = $ul.next(); // Only works if the table immediately follows the <ul>
  var pos = $clicked.index() + 2;

  $table.find("tr").find("td:not(:eq(0))").hide();
  $table.find("td:nth-child(" + pos + ")").css("display", "table-cell");
  $table.find("tr").find("th:not(:eq(0))").hide();
  $clicked.siblings().removeClass("active");
  $clicked.addClass("active");
});

基本上，当您单击<li>时，应搜索下一个表并仅显示/隐藏该表上的信息。在选择所有<tr>元素之前，它会影响页面中的所有表。

编辑：重新阅读您的问题后，这句话使我感到困惑：

当我复制表格并且查看器变为移动响应时；这些按钮仅适用于第一张桌子。

当我尝试在代码笔中复制表格时，两个表格的按钮都起作用，不确定我是否理解您的问题。

Answer 2

问题是您的jQuery目标目前过于通用，因此当您有多个对象时，它只会从第一个对象中查找内容并将其放入两个对象中。您的脚本要做的就是更新两个表。

我分叉了Codepen，添加了第二个表，并在比较表中调整了几个值，因此您应该在每个表中看到不同的内容（每组选项卡分别起作用）

https://codepen.io/CapnHammered/pen/QzBbqN

您缺少的关键部分是某种形式的父选择器-在这种情况下，我们使用了article标签来包装表格：

$( "ul" ).on("click", "li", function() {
  var pos = $(this).index()+2;
  $parent = $(this).closest('article');
  $parent.find("tr").find('td:not(:eq(0))').hide();
  $parent.find('td:nth-child('+pos+')').css('display','table-cell');
  $parent.find("tr").find('th:not(:eq(0))').hide();
  $parent.find('li').removeClass('active');
  $(this).addClass('active');
});

使用比较表。当添加多个表时，移动响应问题？

2 个答案: