使用 this 作为参数，但是 this 应该引用函数内部 on change 中的 'this'

Question

我想根据 select 框中 select 的内容更改 table 中的值。

tds 个 data-value。我希望 val2 和 val3 除以 data-value 或根据我的 select.

保留原样

这是我的代码：

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

可能过火了，但我编辑了你的函数来计算数据值除法（如果 'division' 是 selected），然后如果你随后选择了 'original'，则将其反转。如果您不先 select 除法，'Original' 仍会除以 1，但在 'division' 被 select 编辑后，如果您 select 'original'它会恢复。为了简化这一部分，我在 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 函数以使用单元格 data-value 属性，如果传递给 calc 的参数为空。

综合起来：

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>

使用 this 作为参数，但是 this 应该引用函数内部 on change 中的 'this'

Using this as an argument, but the this should refer to the 'this' inside the on change inside the function

javascript

jquery

arguments

function

ecmascript-6