Используя это в качестве аргумента, но это должно относиться к "этому" внутри изменения on внутри функции

ProgramBox

Используя это в качестве аргумента, но это должно относиться к «этому» внутри изменения on внутри функции

Post author:admin
Запись опубликована:19 января, 2022
Post category:Вопросы по программированию

#javascript #jquery #function #ecmascript-6 #arguments

Вопрос:

Я хочу изменить значения внутри моей таблицы в зависимости от того, что выбрано в поле выбора.

У 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 я ссылаюсь в своем коде, неверно. Как я могу ссылаться на $(this).data('value') внутри td каждого из них?

Ответ №1:

Вероятно, вы переборщили, но я отредактировал вашу функцию для вычисления деления значений данных (если было выбрано «деление»), а затем изменил ее, если впоследствии вы выбрали «оригинал». «Оригинал» по-прежнему делится на 1, если вы сначала не выберете деление, но после того, как будет выбрано «деление», если вы выберете «оригинал», оно вернется. Чтобы упростить эту часть, я добавил data-orig атрибут в вашу td настройку. Как я уже сказал, за бортом…

 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 amp;amp; $(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>

1. спасибо за ответ, как вы видите, когда я нажимаю «Разделить», он должен делиться на data-value что-то еще, на что он должен делиться 1 . Вот почему я использовал функцию для отправки того, на что нужно разделить

2. Хорошо, не уверен, что это то, что вы хотели, но я пересмотрел свой ответ

Ответ №2:

В вашей функции calc вы можете получить доступ к базовому элементу в качестве аргументов each функции в соответствии с документацией.

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

Затем измените вызов calc , чтобы передать значение null, когда мы хотим использовать ячейки data-value , и измените calc функцию, чтобы использовать атрибут cells data-value , если переданный аргумент calc равен null.

Складываю все это воедино:

 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>