Как генерировать уникальные идентификаторы для функций, идентификаторы: рейтинговая система

Question

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

Что я хочу сделать, это повторить процесс до 100 шкал на одной веб-странице, без написание всех уникальных имен функций и идентификаторов для каждого.

Что у меня есть до сих пор:

   function changePlus1(value){
       document.getElementById("countPlus1").value = 1*value;
       var i;
       for (i = 1; i < 6; i++) {
         document.getElementById("selectPlus1"+[i]).style.cssText = 'background-color:rgba(0,255,0,0.2);';
       }
       for (ii = -5; ii < 0; ii++) {
         document.getElementById("selectMinus1"+[ii]).style.cssText = 'background-color:rgba(255,0,0,0.2);';
       }
       document.getElementById("selectPlus1" + value).style.cssText = 'background-color:rgba(0,255,0);';
       document.getElementById("countMinus1").value = "";
   }
   function changeMinus1(value){
       document.getElementById("countMinus1").value = 1*value;
       var i;
       for (i = 1; i < 6; i++) {
         document.getElementById("selectPlus1"+[i]).style.cssText = 'background-color:rgba(0,255,0,0.2);';
       }
       for (ii = -5; ii < 0; ii++) {
         document.getElementById("selectMinus1"+[ii]).style.cssText = 'background-color:rgba(255,0,0,0.2);';
       }
       document.getElementById("selectMinus1" + value).style.cssText = 'background-color:rgba(255,0,0); color:#fff;';
       document.getElementById("countPlus1").value = "";
   }
   function changePlus2(value){
       document.getElementById("countPlus2").value = 1*value;
       var i;
       for (i = 1; i < 6; i++) {
         document.getElementById("selectPlus2"+[i]).style.cssText = 'background-color:rgba(0,255,0,0.2);';
       }
       for (ii = -5; ii < 0; ii++) {
         document.getElementById("selectMinus2"+[ii]).style.cssText = 'background-color:rgba(255,0,0,0.2);';
       }
       document.getElementById("selectPlus2" + value).style.cssText = 'background-color:rgba(0,255,0);';
       document.getElementById("countMinus2").value = "";
   }
   function changeMinus2(value){
       document.getElementById("countMinus2").value = 1*value;
       var i;
       for (i = 1; i < 6; i++) {
         document.getElementById("selectPlus2"+[i]).style.cssText = 'background-color:rgba(0,255,0,0.2);';
       }
       for (ii = -5; ii < 0; ii++) {
         document.getElementById("selectMinus2"+[ii]).style.cssText = 'background-color:rgba(255,0,0,0.2);';
       }
       document.getElementById("selectMinus2" + value).style.cssText = 'background-color:rgba(255,0,0); color:#fff;';
       document.getElementById("countPlus2").value = "";
   }

<style>
    body {
        display:block; width:100%; height:100%; min-height:1000px; margin:0 auto; padding:0; background-color:#fff; top:0; left:0;
        }
    #selectPlus11, #selectPlus12, #selectPlus13, #selectPlus14, #selectPlus15,
    #selectPlus21, #selectPlus22, #selectPlus23, #selectPlus24, #selectPlus25 {
        display:block;
        float:left;
        height:40px; width:40px; margin:0 2px; border-radius:50%; background-color:rgba(0,255,0,0.2); color:#000; font-size:.85rem; font-weight:400;
    }
    #selectMinus1-1, #selectMinus1-2, #selectMinus1-3, #selectMinus1-4, #selectMinus1-5,
    #selectMinus2-1, #selectMinus2-2, #selectMinus2-3, #selectMinus2-4, #selectMinus2-5 {
        height:40px; width:40px; margin:0 2px; border-radius:50%; background-color:rgba(255,0,0,0.2); color:#000; font-size:.85rem; font-weight:400;
    }
    #countPlus1, #countMinus1,
    #countPlus2, #countMinus2 {
        height:40px; width:40px; margin:0 auto; text-align:center; font-size:1.1rem; font-weight:700; border:0; border-bottom:3px solid #000;
    }
    #countPlus1,
    #countPlus2 {
        display:block;
        float:left;
        margin-right:10px;
        background:none;
    }
    #countMinus1,
    #countMinus2 {
        display:block;
        float:right;
        margin-left:10px;
        background:none;
    }
    .bizModelRatingTableLabel {
        padding:0;
    }
    label {
        text-align:left;
        font-size:1rem;
    }
    table.bizModelRatingTable tbody tr td {
        margin:0;
        padding:0;
    }
</style>

<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" id="countPlus1" value=""></td>
    <td><input id="selectPlus15" type="button" onclick="changePlus1(5)" value="5"></td>
    <td><input id="selectPlus14" type="button" onclick="changePlus1(4)" value="4"></td>
    <td><input id="selectPlus13" type="button" onclick="changePlus1(3)" value="3"></td>
    <td><input id="selectPlus12" type="button" onclick="changePlus1(2)" value="2"></td>
    <td><input id="selectPlus11" type="button" onclick="changePlus1(1)" value="1"></td>
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input id="selectMinus1-1" type="button" onclick="changeMinus1(-1)" value="-1">
    <td><input id="selectMinus1-2" type="button" onclick="changeMinus1(-2)" value="-2">
    <td><input id="selectMinus1-3" type="button" onclick="changeMinus1(-3)" value="-3">
    <td><input id="selectMinus1-4" type="button" onclick="changeMinus1(-4)" value="-4">
    <td><input id="selectMinus1-5" type="button" onclick="changeMinus1(-5)" value="-5">
    <td><input type="text" id="countMinus1" value="">
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" id="countPlus2" value=""></td>
    <td><input id="selectPlus25" type="button" onclick="changePlus2(5)" value="5"></td>
    <td><input id="selectPlus24" type="button" onclick="changePlus2(4)" value="4"></td>
    <td><input id="selectPlus23" type="button" onclick="changePlus2(3)" value="3"></td>
    <td><input id="selectPlus22" type="button" onclick="changePlus2(2)" value="2"></td>
    <td><input id="selectPlus21" type="button" onclick="changePlus2(1)" value="1"></td>
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input id="selectMinus2-1" type="button" onclick="changeMinus2(-1)" value="-1">
    <td><input id="selectMinus2-2" type="button" onclick="changeMinus2(-2)" value="-2">
    <td><input id="selectMinus2-3" type="button" onclick="changeMinus2(-3)" value="-3">
    <td><input id="selectMinus2-4" type="button" onclick="changeMinus2(-4)" value="-4">
    <td><input id="selectMinus2-5" type="button" onclick="changeMinus2(-5)" value="-5">
    <td><input type="text" id="countMinus2" value="">
  </tr>
</table>
</div>

Answer 1

То, что я сделал, объединило функции changePlus и changeMinus в одну функцию, которая принимает отправителя (элемент, вызывающий функцию) и значение.

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

Мы используем недавно добавленные классы для различения различных типов элементов.

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

В HTML, кроме добавив классы и удалив ненужные идентификаторы, мы также теперь отправляем элемент (this) и значение в свойстве onclick.

   function changeValue(sender, value){
       var valueType1, valueType2, backgroundPlus, backgroundMinus, backgroundSelected, sibling, plusEls, minusEls;
       var row = sender.parentNode.parentNode;
       var parentDiv = row.closest('div');
       backgroundPlus = 'background-color:rgba(0,255,0,0.2);';
       backgroundMinus = 'background-color:rgba(255,0,0,0.2);';
       if (value > 0) {
           valueType1 = 'plus';
           valueType2 = 'minus';
           plusEls = row.querySelectorAll('.select-plus');
           minusEls = parentDiv.nextElementSibling.querySelectorAll('.select-minus');
           sibling = parentDiv.nextElementSibling;
           backgroundSelected = 'background-color:rgba(0,255,0);';
       } else {
           valueType1 = 'minus';
           valueType2 = 'plus';
           plusEls = parentDiv.previousElementSibling.querySelectorAll('.select-plus');
           minusEls = row.querySelectorAll('.select-minus');
           sibling = parentDiv.previousElementSibling;
           backgroundSelected = 'background-color:rgba(255,0,0); color:#fff;';
       }
       row.querySelector(".count-" + valueType1).value = 1*value;
       plusEls.forEach(function(el) {
           el.style.cssText = backgroundPlus;
       });
       minusEls.forEach(function(el) {
           el.style.cssText = backgroundMinus;
       });
       sender.style.cssText = backgroundSelected;
       sibling.querySelector(".count-" + valueType2).value = "";
   }

<style>
    body {
        display:block; width:100%; height:100%; min-height:1000px; margin:0 auto; padding:0; background-color:#fff; top:0; left:0;
        }
    .select-plus {
        display:block;
        float:left;
        height:40px; width:40px; margin:0 2px; border-radius:50%; background-color:rgba(0,255,0,0.2); color:#000; font-size:.85rem; font-weight:400;
    }
    .select-minus {
        height:40px; width:40px; margin:0 2px; border-radius:50%; background-color:rgba(255,0,0,0.2); color:#000; font-size:.85rem; font-weight:400;
    }
    .count-plus, .count-minus {
        height:40px; width:40px; margin:0 auto; text-align:center; font-size:1.1rem; font-weight:700; border:0; border-bottom:3px solid #000;
    }
    .count-plus {
        display:block;
        float:left;
        margin-right:10px;
        background:none;
    }
    .count-minus {
        display:block;
        float:right;
        margin-left:10px;
        background:none;
    }
    .bizModelRatingTableLabel {
        padding:0;
    }
    label {
        text-align:left;
        font-size:1rem;
    }
    table.bizModelRatingTable tbody tr td {
        margin:0;
        padding:0;
    }
</style>

<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" class="count-plus" value=""></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 5)" value="5"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 4)" value="4"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 3)" value="3"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 2)" value="2"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 1)" value="1"></td>
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -1)" value="-1">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -2)" value="-2">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -3)" value="-3">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -4)" value="-4">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -5)" value="-5">
    <td><input type="text" class="count-minus" value="">
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input type="text" class="count-plus" value=""></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 5)" value="5"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 4)" value="4"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 3)" value="3"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 2)" value="2"></td>
    <td><input class="select-plus" type="button" onclick="changeValue(this, 1)" value="1"></td>
  </tr>
</table>
</div>
<div style="display:block; float:left; width:50%;">
<table class="bizModelRatingTable" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td><input class="select-minus" type="button" onclick="changeValue(this, -1)" value="-1">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -2)" value="-2">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -3)" value="-3">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -4)" value="-4">
    <td><input class="select-minus" type="button" onclick="changeValue(this, -5)" value="-5">
    <td><input type="text" class="count-minus" value="">
  </tr>
</table>
</div>