Question

我想使用javascript / jquery在一个函数中编写多个按钮。我的问题是

每次使用单独的onclick事件为每个按钮编写单独的函数时，就像下面的代码片段中一样
我想编写一个包含多个按钮的功能

function todaySales() {
  alert('button1');
}

function yesterdaySales() {
  alert('button2');
}

function wtdsales() {
  alert('button3');
}

function llsales() {
  alert('button4');
}

function lastSevenDays() {
  alert('button5');
}

function lastThirtyDays() {
  alert('button6');
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="but1" class="btn btn-outline-info" onclick="todaySales();">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="yesterdaySales();">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="wtdsales();">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="llsales();">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="lastSevenDays();">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="lastThirtyDays()">Last 30 Days</button>

Answer 1

    function clickButton(buttonName){
      alert(buttonName);
    }

只需要种子参数即可起作用。很简单。

Answer 2

您可以使用相同的单击处理程序功能，而只是将数据从按钮的属性中删除，也可以将数据作为参数传递给该功能。

function clickHandler(ev) {
  var target = event.target
  console.log(target.id, target.textContent) // or whatever property
  
}

<button id="but1" class="btn btn-outline-info" onclick="clickHandler();">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="clickHandler();">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="clickHandler();">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="clickHandler();">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="clickHandler();">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="clickHandler();">Last 30 Days</button>

Answer 3

您可以给相同的函数名称加上不同的参数值，例如

class="ValueDown Difference"

示例：https://codepen.io/kaslab/pen/rROyVr

Answer 4

尝试

      $(document).ready(function(){
          $(".btn").on('click',function() {
              alert( $(this).text())
          });
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">

</script>
<button id="but1" class="btn btn-outline-info">Today</button>
<button id="but2" class="btn btn-outline-info">Yesterday</button>
<button id="but3" class="btn btn-outline-info">WTD</button>
<button id="but4" class="btn btn-outline-info">MTD</button>
<button id="but5" class="btn btn-outline-info">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info">Last 30</button>

Answer 5

使用jQuery非常简单：假设您的按钮是具有div的{{1}}元素的直接子元素

id=“buttonsArray”

如您所见，$(‘#buttonsArray’).on(‘click’, ‘button’, function() { alert($(this)); });方法的重载使您可以动态绑定到clicked元素。您可以在每个按钮内使用data属性在该函数内创建一个switch语句，然后根据所按下的按钮来区分函数的行为

.on()

switch语句：

<button data-value=“oneValue”>
<button data-value=“otherValue”>

Answer 6

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="but1" class="btn btn-outline-info" onclick="onefunction();">Today</button>
<button id="but2" class="btn btn-outline-info" onclick="onefunction();">Yesterday</button>
<button id="but3" class="btn btn-outline-info" onclick="onefunction();">WTD</button>
<button id="but4" class="btn btn-outline-info" onclick="onefunction();">MTD</button>
<button id="but5" class="btn btn-outline-info" onclick="onefunction();">Last 7 Days</button>
<button id="but6" class="btn btn-outline-info" onclick="onefunction()">Last 30 Days</button>

JS

function onefunction() {
  if($(this).attr("id") == "but1"){
    alert('button1');
  }
  else if($(this).attr("id") == "but2"){
    alert('button2');
  }
  ...
}

使用javascript / jquery在一个函数中编写多个按钮

6 个答案: