单独控制多个表

Question

我正在使用多个 html 表格，每个表格都有自己的工具栏。但我无法单独控制每个表。如果您查看the example，您可以看到如果我单击字体大小按钮或行高按钮，它会影响两个表格。 我正在寻找一种解决方案，我不必为每个表都拥有唯一的 ID。

我尝试过使用：

closest('element-row').find('.title')  

没有任何运气。也许这是一个可能的解决方案，不确定。

jsfiddle example

$(".line-height-btn").click(function() {
  if ($(".large-line-height").length) {
    $("td").removeClass("large-line-height").addClass("medium-line-height");
  } else if ($(".medium-line-height").length) {
    $("td").removeClass("medium-line-height").addClass("small-line-height");
  } else if ($(".small-line-height").length) {
    $("td").removeClass("small-line-height").addClass("large-line-height");
  } else {
    $("td").addClass("medium-line-height");
  }
});

$(".format-size-btn").click(function() {
  if ($(".large-font-size").length) {
    $("td").removeClass("large-font-size").addClass("medium-font-size");
  } else if ($(".medium-font-size").length) {
    $("td").removeClass("medium-font-size").addClass("small-font-size");
  } else if ($(".small-font-size").length) {
    $("td").removeClass("small-font-size").addClass("large-font-size");
  } else {
    $("td").addClass("medium-font-size");
    console.log("Hello world!");
  }
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.large-line-height {
  line-height: 3rem !important;
}

.medium-line-height {
  line-height: 2rem !important;
}

.small-line-height {
  line-height: 1rem !important;
}

.large-font-size {
  font-size: 16px !important;
  letter-spacing: -0.004em !important;
}

.medium-font-size {
  font-size: 14px !important;
  letter-spacing: 0.001em !important;
}

.small-font-size {
  font-size: 12px !important;
  letter-spacing: 0.008em !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3></div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>
    </div>
  </div>
  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3></div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>
   
    </div>
  </div>
  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

您可以使用以下代码：

$(".line-height-btn").click(function() {
if ($(".large-line-height").length) {
$(this).parent().parent().next().find("td").removeClass("large-line-height").addClass("medium-line-height");
} else if ($(".medium-line-height").length) {
 $(this).parent().parent().next().find("td").removeClass("medium-line-height").addClass("small-line-height");
} else if ($(".small-line-height").length) {
 $(this).parent().parent().next().find("td").removeClass("small-line-height").addClass("large-line-height");
  } else {
    $(this).parent().parent().next().find("td").addClass("medium-line-height");
     }
    });

类似地对 $(".format-size-btn").click() 应用这种逻辑

Answer 2

您的处理函数中的let $td = $(evt.target).closest('.table-title-row').next('.table-container').find('td'); 将 - 给定您当前的 HTML 结构 - 找到您想要的表格单元格。

$(".line-height-btn").on("click", function(evt) {
  let $tbody = $(evt.target).closest('.table-title-row').next('.table-container').find('tbody')[0];
  switch($tbody.className) {
  case "large-line-height":
    $tbody.className = "medium-line-height";
    break;
  case "medium-line-height":
    $tbody.className = "small-line-height";
    break;
  case "small-line-height":
    $tbody.className = "large-line-height";
    break;
  default:
    $tbody.className = "medium-line-height";
  }
});

$(".format-size-btn").on("click", function(evt) {
  let $table = $(evt.target).closest('.table-title-row').next('.table-container').find('table')[0];
  switch($table.className) {
  case "large-font-size":
    $table.className = "medium-font-size";
    break;
  case "medium-font-size":
    $table.className = "small-font-size";
    break;
  case "small-font-size":
    $table.className = "large-font-size";
    break;
  default:
    $table.className = "medium-font-size";
    console.log("Hello world!");
  }
});

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
}

.large-line-height td {
  line-height: 3rem !important;
}

.medium-line-height td  {
  line-height: 2rem !important;
}

.small-line-height td  {
  line-height: 1rem !important;
}

.large-font-size td  {
  font-size: 16px !important;
  letter-spacing: -0.004em !important;
}

.medium-font-size td  {
  font-size: 14px !important;
  letter-spacing: 0.001em !important;
}

.small-font-size td  {
  font-size: 12px !important;
  letter-spacing: 0.008em !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3>
    </div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>
    </div>
  </div>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="table-card">
  <div class="table-title-row">
    <div class="table-title-text">
      <h3>Header</h3>
    </div>
    <div class="table-title-buttons">
      <a class="btn format-size-btn">
        <i class="material-icons">
          format_size
        </i>
        <span class="btn-label"></span>
      </a>
      <a class="btn line-height-btn">
        <i class="material-icons">
          line_weight
        </i>
        <span class="btn-label"></span>
      </a>

    </div>
  </div>
  <div class="table-container">
    <table>
      <thead>
        <tr>
          <th>
            <div class="checkbox">
              <input id="check-all" type="checkbox">
              <label for="check-all"></label>
            </div>
          </th>
          <th align="right">Object</th>
          <th align="left">Type</th>
          <th align="left">Group</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-1" type="checkbox">
              <label for="check-1"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-2" type="checkbox">
              <label for="check-2"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
        <tr>
          <td>
            <div class="checkbox">
              <input id="check-3" type="checkbox">
              <label for="check-3"></label>
            </div>
          </td>
          <td align="right">123</td>
          <td align="left">ABC</td>
          <td align="left">Family</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>