javascript - 我正在使用 jQuery 隐藏/显示基于特定类的值，但需要帮助将函数限制在特定范围内

Question

我正在编写一个网页来描述如何在 Excel 中使用索引/匹配公式。

我正在创建一个表格，您可以在其中在 Excel 公式和结果之间切换。它看起来像这样:

HTML:

<input type="checkbox" class="selectformula">Show Formulas</input> | <input type="checkbox" class="selectvalue">Show Values</input>

<div class="table-responsive">
<table class="table">
<tr><td>Atlas</td><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td></tr>
 <tr><td>1</td><td>Campaign Name</td><td>Publisher Name</td><td> Impressions</td><td>Clicks</td><td>Mapped Impressions</td><td>Mapped Clicks</td></tr>
 <tr><td>2</td><td>Campaign A</td><td>Publisher A</td><td>100</td><td>10</td><td><span class="formula">=INDEX(DCM!C:C,MATCH(B2,DCM!B:B,0))</span><span class="value">90</span></td><td><span class="formula">=INDEX(DCM!D:D,MATCH(B2,DCM!B:B,0))</span><span class="value">5</span></td></tr>
 <tr><td>3</td><td>Campaign A</td><td>Publisher B</td><td>200</td><td>20</td><td><span class="formula">=INDEX(DCM!C:C,MATCH(B3,DCM!B:B,0))</span><span class="value">175</span></td><td><span class="formula">=INDEX(DCM!D:D,MATCH(B3,DCM!B:B,0))</span><span class="value">25</span></td></tr>
 <tr><td>4</td><td>Campaign B</td><td>Publisher A</td><td>500</td><td>50</td><td><span class="red"><span class="formula">=INDEX(DCM!C:C,MATCH(B4,DCM!B:B,0))</span><span class="value">90</span></span></td><td><span class="red"><span class="formula">=INDEX(DCM!D:D,MATCH(B4,DCM!B:B,0))</span><span class="value">5</span></span></td></tr>
</table>

JavaScript/JQuery:

$(document).ready(function(){
  $(".value").hide();
  $('.selectformula, .selectvalue').change(function () {
    $('input[type="checkbox"]').not(this).prop("checked", false);
    if($('.selectformula').is(':checked')){
      $('.selectvalue').prop('checked', false);
      $('.formula').show();
      $('.value').hide();
    }
    if ($('.selectvalue').is(':checked')){
      $('.selectformula').prop('checked', false);
      $('.value').show();
      $('.formula').hide();
    }
  });
});

基本上，在我的表格中的 td 内，我有一个公式和值的范围。我最初隐藏该值并显示公式。当选中“显示值”复选框时，我会隐藏公式并显示值。

问题是，我在同一页面上有多个使用相同类的表，因此如果我为一个表选择“显示值”，则页面上的所有其他表也会显示我想避免的值。

有没有一种方法可以将复选框和表格包装在 div 中，并且仅影响该特定 div 中的结果，即使页面上有其他元素共享相同的类？

理想情况下我想做这样的事情:

1. 用户与 div 交互(可能是悬停？)。
2. 用户选择 div 内的复选框。
3. 根据所选的复选框，在该 div 内的表格中切换公式/值。

我想我可以给每个 div 相同的类名，当它悬停在上面并且“this”.checkbox 更改时，我可以执行其余的代码。

Answer 1

change 事件的 this 将是选中的复选框。因此，您所需要做的就是引用包含的表。您可以使用最接近的方法来执行此操作。

例如。

var $table = $(this).closest("table");

现在不要只是做类似 -> $('input[type="checkbox"]').xxxxx 的事情，而是将其更改为 ->

$table.find('input[type="checkbox"]').xxxxx

基本上，$table 现在的范围仅限于当前表，而不是整个文档。