Есть ли способ иметь только одну функцию в jQuery для обработки всех кнопок HTML? - PullRequest
Новая
       1

Есть ли способ иметь только одну функцию в jQuery для обработки всех кнопок HTML?

0 голосов
/ 01 ноября 2019

Я работаю над калькулятором цен и хочу рассчитать цену в зависимости от выбранной кнопки. Я также ищу способ сделать это только с одной функцией вместо функции onclick для каждой отдельной кнопки.

Я пытался создать событие onclick для каждой кнопки, но это был не способПойдите, поскольку документ был полон бессмысленных функций. 

<div class="btn-toolbar mb-3" role="toolbar">
    <div class="btn-group btn-group-sm" role="group" style="margin: auto;">
        <span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
        <button type="button" class="btn btn-secondary btn-form">1</button>
        <button type="button" class="btn btn-secondary btn-form">2</button>
        <button type="button" class="btn btn-secondary btn-form">4</button>
        <button type="button" class="btn btn-secondary btn-form">6</button>
    </div>
</div>

Я ожидаю использовать только одну функцию для всех этих кнопок и только читать значение кнопки и работать с ним впоследствии. До сих пор я использовал onclick для каждой кнопки, но это был не тот путь, потому что в итоге документ был полон функций, содержащих только одну строку, что, я думаю, возможно только с одной функцией, вместо огромного количествафункций и событий клика. Я также ожидаю, что кнопка изменит общую цену продукта, содержащуюся в переменной с именем $ currentPrice, которую я обновляю при изменениях и событиях щелчка, поэтому она должна редактировать только переменную $ currentPrice.

Ответы [ 3 ]

1 голос
/ 01 ноября 2019

Если вы выполняете те же вычисления для кнопок, но только разные значения, как вы упомянули:

Я ожидаю использовать только одну функцию для всех этих кнопок и только читать значение кнопки иработать с ним потом.

Вы можете сделать: 

$("button").click(function() {
$(".rates").html("rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
});
.rates {
  margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar mb-3" role="toolbar">
    <div class="btn-group btn-group-sm" role="group" style="margin: auto;">
        <span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
        <button type="button" class="btn btn-secondary btn-form">1</button>
        <button type="button" class="btn btn-secondary btn-form">2</button>
        <button type="button" class="btn btn-secondary btn-form">4</button>
        <button type="button" class="btn btn-secondary btn-form">6</button>
    </div>
</div>
<div class="rates">
</div>

НО если ваши расчеты отличаются для каждой кнопки, вы можете сделать что-то вроде: 

$("button").click(function() {
switch($(this).text()) {
case "1":
$(".rates").html("good rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
case "2":
$(".rates").html("better rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*200);
break;
case "4":
$(".rates").html("best rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
default:
$(".rates").html("normal rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*100);
}
});
.rates {
  margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar mb-3" role="toolbar">
    <div class="btn-group btn-group-sm" role="group" style="margin: auto;">
        <span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
        <button type="button" class="btn btn-secondary btn-form">1</button>
        <button type="button" class="btn btn-secondary btn-form">2</button>
        <button type="button" class="btn btn-secondary btn-form">4</button>
        <button type="button" class="btn btn-secondary btn-form">6</button>
    </div>
</div>
<div class="rates">
</div>

ЗА ВАШ КОММЕНТАРИЙ:

УВЕДОМЛЕНИЕ о том, как я добавил group-1 и group-2 классы для контейнера div и как я изменил функции щелчка с кнопки на group-1 button и group-2 button . Я также изменил измененный идентификатор второго диапазона на inputGroup-sizing-sm2 , поскольку идентификаторы должны быть уникальными и по одному на страницу.

Проверьте это: 

$(".group-1 button").click(function() {
switch($(this).text()) {
case "1":
$(".rates").html("FROM 1-ST GROUP good rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
case "2":
$(".rates").html("FROM 1-ST GROUP better rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*200);
break;
case "4":
$(".rates").html("FROM 1-ST GROUP best rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
default:
$(".rates").html("FROM 1-ST GROUP normal rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*100);
}
});
$(".group-2 button").click(function() {
switch($(this).text()) {
case "1":
$(".rates").html("FROM 2-ND GROUP good rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
case "2":
$(".rates").html("FROM 2-ND GROUP better rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*200);
break;
case "4":
$(".rates").html("FROM 2-ND GROUP best rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*150);
break;
default:
$(".rates").html("FROM 2-ND GROUP normal rates for " + $(this).text() + " Počet vodivých vrstev are: $" + $(this).text()*100);
}
});
.rates {
  margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btn-toolbar mb-3" role="toolbar">
    <div class="group-1 btn-group btn-group-sm" role="group" style="margin: auto;">
        <span class="input-group-text" id="inputGroup-sizing-sm">Počet vodivých vrstev</span>
        <button type="button" class="btn btn-secondary btn-form">1</button>
        <button type="button" class="btn btn-secondary btn-form">2</button>
        <button type="button" class="btn btn-secondary btn-form">4</button>
        <button type="button" class="btn btn-secondary btn-form">6</button>
    </div>
</div>
<div class="btn-toolbar mb-3" role="toolbar">
    <div class="group-2 btn-group btn-group-sm" role="group" style="margin: auto;">
        <span class="input-group-text" id="inputGroup-sizing-sm2">Počet vodivých vrstev</span>
        <button type="button" class="btn btn-secondary btn-form">1</button>
        <button type="button" class="btn btn-secondary btn-form">2</button>
        <button type="button" class="btn btn-secondary btn-form">4</button>
        <button type="button" class="btn btn-secondary btn-form">6</button>
    </div>
</div>
<div class="rates">
</div>
1 голос
/ 01 ноября 2019

Я настоятельно рекомендую прочитать Разделение вашего HTML, CSS и JavaScript . Хотя ответы здесь работают, они могут быть сильно связаны и их сложно расширить.

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

$(document).ready(function() {
  $('.js-change-text').on('click', function() {
    var src$ = $(this);
    var target = src$.data('target');
    var target$ = $(target);
    var text = src$.data('text');
    target$.text(text);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" value="Div 1 Change A" data-target=".div1" data-text="Change A Text" class="js-change-text"/>
<input type="button" value="Div 1 Change B" data-target=".div1" data-text="Change B Text" class="js-change-text"/>
<input type="button" value="Div 1 Change C" data-target=".div1" data-text="Change C Text" class="js-change-text"/>
<input type="button" value="Div 2 Change A" data-target=".div2" data-text="Change A Text" class="js-change-text"/>
<input type="button" value="Div 2 Change B" data-target=".div2" data-text="Change B Text" class="js-change-text"/>

<div>Div 1 <span class="div1"></span></div>
<div>Div 2 <span class="div2"></span></div>
0 голосов
/ 01 ноября 2019

Попробуйте: 

$(".btn-form").click(function() {
var clickedButtonTxt = $(this).text();
samefunction(clickedButtonTxt);
});

function samefunction(clickedButtonTxt){
//Do your stuff for each button
}

И если вы хотите назначить несколько кнопок с разными классами, вы можете разделить селекторы запятой, как эта. 

$(".btn-form, .btn2, .btn3").click(function() {
...
)};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...