使用 this 作为参数，但是 this 应该引用函数内部 on 更改中的“this”

Question

我想根据在选择框中选择的内容更改表中的值。

tds 有一个data-value。我希望 val2 和 val3 除以 data-value 或根据我选择的内容保持不变。

这是我的代码：

let data1 = [
    {date:'2018-01-01', device: 'iphone',   site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'iphone',   site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'iphone',   site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-01', device: 'ipad',     site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'ipad',     site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'ipad',     site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-02', device: 'iphone',   site: 'google', val1:11, val2:22, val3:33},
    {date:'2018-01-02', device: 'iphone',   site: 'bing',   val1:25, val2:27, val3:28},
    {date:'2018-01-02', device: 'iphone',   site: 'jeeves', val1:67, val2:80, val3:15},
    {date:'2018-01-02', device: 'ipad',     site: 'google', val1:12, val2:21, val3:31},
    {date:'2018-01-02', device: 'ipad',     site: 'bing',   val1:26, val2:16, val3:11},
    {date:'2018-01-02', device: 'ipad',     site: 'jeeves', val1:65, val2:79, val3:55},
    {date:'2018-01-03', device: 'iphone',   site: 'google', val1:17, val2:19, val3:11},
    {date:'2018-01-03', device: 'iphone',   site: 'bing',   val1:13, val2:15, val3:12},
    {date:'2018-01-03', device: 'iphone',   site: 'jeeves', val1:69, val2:79, val3:15},
    {date:'2018-01-03', device: 'ipad',     site: 'google', val1:17, val2:51, val3:31},
    {date:'2018-01-03', device: 'ipad',     site: 'bing',   val1:25, val2:15, val3:17},
    {date:'2018-01-03', device: 'ipad',     site: 'jeeves', val1:61, val2:71, val3:15}
    ];

    Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
    let ths = Object.keys(data1[0]);
    let nums = ['val2', 'val3'];

    data1.forEach((d, idx) => {
        $(`#my_tds`).append(`<tr></tr>`);
        ths.forEach(th => {
            $(`#my_tds > tr:last`).append(`
                <td>
                <div class='one ${th}_id' data-value=${d['val1']}>${d[th]}</div>
                </td>
                `);
        });
    });

    const calc = (x) => {
        nums.forEach(d => {
            $(`.${d}_id`).each(function(){
                // $(this).data('value');
                let mathFunc = $(this).text() / x;
                console.log(mathFunc);
                $(this).html(mathFunc);
            });
        });
    }
//not sure how to send that value as an argument because the 'this' should be the 'this' from $(`#${d}_id`).each(function()
$('#mySelect').on('change', function() {
    if (this.value === 'divide') calc($(this).data('value'));
    else calc(1);
});

    table, td, th { border: 1px solid black; }
    #mytable { 
        width: 100%;
        border-collapse: collapse; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='mySelect'>
    <option value="" disabled selected>Select your option</option>
    <option value='divide'>Divide</option>
    <option value='orig'>Original</option>
</select>
<br><br>
<table id='mytable'>
    <thead><tr id='my_ths'></tr></thead>
    <tbody id='my_tds'></tbody>
</table>

如何发送$(this).data('value') 作为参数？我知道我在代码中所指的this 是错误的。如何在 td 中分别引用 $(this).data('value')？

Answer 1

可能过火了，但我编辑了您的函数来计算数据值除法（如果选择了“除法”），如果您随后选择了“原始”，则将其反转。如果您不先选择除法，“原始”仍会除以 1，但在选择“除法”后，如果选择“原始”，它将恢复。为了使这部分变得简单，我在您的td 设置中添加了一个data-orig 属性。就像我说的，落水...

let data1 = [{
    date: '2018-01-01',
    device: 'iphone',
    site: 'google',
    val1: 10,
    val2: 20,
    val3: 30
  },
  {
    date: '2018-01-01',
    device: 'iphone',
    site: 'bing',
    val1: 23,
    val2: 12,
    val3: 14
  },
  {
    date: '2018-01-01',
    device: 'iphone',
    site: 'jeeves',
    val1: 67,
    val2: 78,
    val3: 12
  },
  {
    date: '2018-01-01',
    device: 'ipad',
    site: 'google',
    val1: 10,
    val2: 20,
    val3: 30
  },
  {
    date: '2018-01-01',
    device: 'ipad',
    site: 'bing',
    val1: 23,
    val2: 12,
    val3: 14
  },
  {
    date: '2018-01-01',
    device: 'ipad',
    site: 'jeeves',
    val1: 67,
    val2: 78,
    val3: 12
  },
  {
    date: '2018-01-02',
    device: 'iphone',
    site: 'google',
    val1: 11,
    val2: 22,
    val3: 33
  },
  {
    date: '2018-01-02',
    device: 'iphone',
    site: 'bing',
    val1: 25,
    val2: 27,
    val3: 28
  },
  {
    date: '2018-01-02',
    device: 'iphone',
    site: 'jeeves',
    val1: 67,
    val2: 80,
    val3: 15
  },
  {
    date: '2018-01-02',
    device: 'ipad',
    site: 'google',
    val1: 12,
    val2: 21,
    val3: 31
  },
  {
    date: '2018-01-02',
    device: 'ipad',
    site: 'bing',
    val1: 26,
    val2: 16,
    val3: 11
  },
  {
    date: '2018-01-02',
    device: 'ipad',
    site: 'jeeves',
    val1: 65,
    val2: 79,
    val3: 55
  },
  {
    date: '2018-01-03',
    device: 'iphone',
    site: 'google',
    val1: 17,
    val2: 19,
    val3: 11
  },
  {
    date: '2018-01-03',
    device: 'iphone',
    site: 'bing',
    val1: 13,
    val2: 15,
    val3: 12
  },
  {
    date: '2018-01-03',
    device: 'iphone',
    site: 'jeeves',
    val1: 69,
    val2: 79,
    val3: 15
  },
  {
    date: '2018-01-03',
    device: 'ipad',
    site: 'google',
    val1: 17,
    val2: 51,
    val3: 31
  },
  {
    date: '2018-01-03',
    device: 'ipad',
    site: 'bing',
    val1: 25,
    val2: 15,
    val3: 17
  },
  {
    date: '2018-01-03',
    device: 'ipad',
    site: 'jeeves',
    val1: 61,
    val2: 71,
    val3: 15
  }
];

Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
let ths = Object.keys(data1[0]);
let nums = ['val2', 'val3'];

data1.forEach((d, idx) => {
  $(`#my_tds`).append(`<tr></tr>`);
  ths.forEach(th => {
    $(`#my_tds > tr:last`).append(`
                <td>
                <div class='one ${th}_id' data-value='${d['val1']}'  data-orig='${d[th]}'>${d[th]}</div>
                </td>
                `);
  });
});

const calc = (x) => {
  nums.forEach(d => {
    $(`.${d}_id`).each(function() {
      let mathFunc
      if (x === 1 && $(this).attr('data-processed') === 'true') {
        mathFunc = $(this).attr('data-orig');
      } else {
        let denominator = x === 1 ? 1 : Number($(this).data('value'));
        mathFunc = Number($(this).text()) / denominator;
      }

      $(this).attr('data-processed', (x === 1 ? 'false' : 'true'));
      // console.log(mathFunc);
      $(this).html(mathFunc);
    });
  });
}
//not sure how to send that value as an argument because the 'this' should be the 'this' from $(`#${d}_id`).each(function()
$('#mySelect').on('change', function() {
  console.log($(this).val(), this.value)
  if (this.value === 'divide') calc(0);
  else calc(1);
});

table,
td,
th {
  border: 1px solid black;
}

#mytable {
  width: 100%;
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='mySelect'>
  <option value="" disabled selected>Select your option</option>
  <option value='divide'>Divide</option>
  <option value='orig'>Original</option>
</select>
<br><br>
<table id='mytable'>
  <thead>
    <tr id='my_ths'></tr>
  </thead>
  <tbody id='my_tds'></tbody>
</table>

Answer 2

在您的 calc 函数中，您可以访问底层元素作为 each、as per documentation 的函数参数。

$(`.${d}_id`).each(function(i,e){
    // i is the index, e is the element.
    console.log(e);
});

接下来修改对calc的调用以在我们想要使用单元格data-value时传递null，如果传递给calc的参数为null，则修改calc函数以使用单元格data-value属性。

把它们放在一起：

let data1 = [
    {date:'2018-01-01', device: 'iphone',   site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'iphone',   site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'iphone',   site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-01', device: 'ipad',     site: 'google', val1:10, val2:20, val3:30},
    {date:'2018-01-01', device: 'ipad',     site: 'bing',   val1:23, val2:12, val3:14},
    {date:'2018-01-01', device: 'ipad',     site: 'jeeves', val1:67, val2:78, val3:12},
    {date:'2018-01-02', device: 'iphone',   site: 'google', val1:11, val2:22, val3:33},
    {date:'2018-01-02', device: 'iphone',   site: 'bing',   val1:25, val2:27, val3:28},
    {date:'2018-01-02', device: 'iphone',   site: 'jeeves', val1:67, val2:80, val3:15},
    {date:'2018-01-02', device: 'ipad',     site: 'google', val1:12, val2:21, val3:31},
    {date:'2018-01-02', device: 'ipad',     site: 'bing',   val1:26, val2:16, val3:11},
    {date:'2018-01-02', device: 'ipad',     site: 'jeeves', val1:65, val2:79, val3:55},
    {date:'2018-01-03', device: 'iphone',   site: 'google', val1:17, val2:19, val3:11},
    {date:'2018-01-03', device: 'iphone',   site: 'bing',   val1:13, val2:15, val3:12},
    {date:'2018-01-03', device: 'iphone',   site: 'jeeves', val1:69, val2:79, val3:15},
    {date:'2018-01-03', device: 'ipad',     site: 'google', val1:17, val2:51, val3:31},
    {date:'2018-01-03', device: 'ipad',     site: 'bing',   val1:25, val2:15, val3:17},
    {date:'2018-01-03', device: 'ipad',     site: 'jeeves', val1:61, val2:71, val3:15}
    ];

    Object.keys(data1[0]).forEach(heads => $(`#my_ths`).append(`<th>${heads}</th>`));
    let ths = Object.keys(data1[0]);
    let nums = ['val2', 'val3'];

    data1.forEach((d, idx) => {
        $(`#my_tds`).append(`<tr></tr>`);
        ths.forEach(th => {
            $(`#my_tds > tr:last`).append(`
                <td>
                <div class='one ${th}_id' data-value=${d['val1']}>${d[th]}</div>
                </td>
                `);
        });
    });

    const calc = (x) => {
        nums.forEach(d => {
            $(`.${d}_id`).each(function(i,e){
                // $(this).data('value');
                let mathFunc = $(e).text() / (x ?? $(this).data('value'));
                console.log(mathFunc);
                $(this).html(mathFunc);
            });
        });
    }
//not sure how to send that value as an argument because the 'this' should be the 'this' from $(`#${d}_id`).each(function()
$('#mySelect').on('change', function() {
    if (this.value === 'divide') calc(null);
    else calc(1);
});

 table, td, th { border: 1px solid black; }
    #mytable { 
        width: 100%;
        border-collapse: collapse; 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id='mySelect'>
    <option value="" disabled selected>Select your option</option>
    <option value='divide'>Divide</option>
    <option value='orig'>Original</option>
</select>
<br><br>
<table id='mytable'>
    <thead><tr id='my_ths'></tr></thead>
    <tbody id='my_tds'></tbody>
</table>