时间戳

首页 > 解决方案 > 如果条件通过单击不同的按钮返回不同的数据

javascript - 如果条件通过单击不同的按钮返回不同的数据

问题描述

我想做一个函数，当点击不同的按钮时可以返回不同的数据。请查看我的代码并建议我进行所需的更改，非常感谢您的宝贵时间。

function getData() {
   if($('data1 option:checked')){
      const data1 = mainData().map(d => ({...d, x:d.x*10}));
      return data1;
   }
   else if($('data2 option:checked')){
      const data2 = mainData().map(d => ({...d, x:d.x*25}));
      return data2;
   }
   else if($('data3 option:checked')){
      const data3 = mainData().map(d => ({...d, x:d.x*13}));
      return data3;
   }
   else if($('data4 option:checked')){
      const data4 = mainData().map(d => ({...d, x:d.x*17}));
      return data4;
   }
};
<select id = "dropdown">
<option class='data1'>data1</option>
<option class='data2'>data2</option>
<option class='data3'>data3</option>
<option class='data4'>data4</option>
</select>

标签： javascriptjquery

解决方案

您的代码有几个问题，例如无效的选择器（即data1是类，并且它option本身就是这样option.data1），:checked在option元素上使用而不是:selected在条件下直接使用 jQuery 对象if（它不会总是作为对象工作强制true值，请改用该length属性）。

value话虽如此，您可以通过在元素中放置一个属性来修复逻辑并使其更有效地工作，该属性是在语句option的相对条件中使用的图形。if然后，您可以将您的事件处理程序连接到changeofselect并执行您的逻辑，而完全不需要该if语句。尝试这个：

<select id="dropdown">
  <option value="10">data1</option>
  <option value="25">data2</option>
  <option value="13">data3</option>
  <option value="17">data4</option>
</select>

jQuery($ => {
  $('#dropdown').on('change', function() {
    let optionValue = this.value;
    let data = mainData().map(d => ({ 
      ...d,
      x: d.x * optionValue
    }));

    // use data here...
  }); 
});

推荐阅读