Написать несколько кнопок в одной функции, используя javascript/jquery

Я хочу написать несколько кнопок в одной функции, используя 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>

Возможный дубликат Использование одной и той же функции с несколькими кнопками и вызвать одну и ту же функцию jQuery в нескольких кнопках и Использование нескольких кнопок для одной и той же функции, которая перенаправляет на разные функции

— 28.02.2019 10:17

(Третий дубликат намного чище и ближе к тому, чего вы хотите достичь)

— 28.02.2019 10:22

javascript jquery button

28.02.2019 10:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

664

Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

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

просто нужно семя параметров для работы. Это просто.

28.02.2019 10:19

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>

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

28.02.2019 10:20

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

function clickHandler(ev) {
  var target = event.target
  console.info(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>

28.02.2019 10:23

Ответ принят как подходящий

Попробуй

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

Спасибо! мне помогло.

— 28.02.2019 11:33

28.02.2019 10:25

использовать jQuery очень просто: предположим, что ваши кнопки являются прямыми дочерними элементами элемента div, имеющего id=“buttonsArray”

$(‘#buttonsArray’).on(‘click’, ‘button’, function() {
        alert($(this));
    });

Как видите, эта перегрузка метода .on() позволяет динамически привязываться к выбранному элементу. Вы можете использовать атрибут данных внутри каждой кнопки, чтобы создать оператор переключения внутри этой функции, а затем дифференцировать поведение вашей функции в зависимости от того, какая кнопка была нажата.

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

Оператор переключения:

var myValue = $(this).data()[“value”]
switch (myValue) {
    case “oneValue”:
        // do something
        break;
    case “otherValue”:
        // do something else
        break;
}

Ваш первый код не будет работать, так как button не является потомком #but1 - лучше использовать $(".btn-outline-info").on("click", function() ...

— 28.02.2019 10:26

Первый раз, когда я увидел вопрос, они были...

— 28.02.2019 10:27

Посмотрите еще раз - просто плохой интервал в исходном (до редактирования) посте.

— 28.02.2019 10:29

О, понятно... Думаю, все-таки лучше уменьшить количество возможных элементов, к которым может применяться функция. Отредактировано

— 28.02.2019 10:31

28.02.2019 10:25

Вы можете указать одно и то же имя функции с другим значением параметра, например

<button id = "but1" class = "btn btn-outline-info" onclick = "salesAction(this, 'todaySales');">Today</button>
<button id = "but2" class = "btn btn-outline-info" onclick = "salesAction(this, 'yesterdaySales');">Yesterday</button>
<button id = "but3" class = "btn btn-outline-info" onclick = "salesAction(this, 'wtdsales');">WTD</button>
<button id = "but4" class = "btn btn-outline-info" onclick = "salesAction(this, 'llsales');">MTD</button>
<button id = "but5" class = "btn btn-outline-info" onclick = "salesAction(this, 'lastSevenDays');">Last 7 Days</button>
<button id = "but6" class = "btn btn-outline-info" onclick = "salesAction(this, 'lastThirtyDays')">Last 30 Days</button>

<script>
function salesAction(thisObj, $salesVal){
  console.info($salesVal);
  // use switch to write separate logic for each sales
}
</script>

пример: https://codepen.io/kaslab/pen/rROyVr

28.02.2019 10:25