如何为功能，ID生成唯一标识符：评级系统

Question

我正在建立一个评分系统，其中每个选择都包含从1-5到-1到-5的比例。根据您在秤上选择的内容，将在输入字段中填充数字，并突出显示该选择。

我想做的是在同一网页上重复多达100个刻度的过程，而不必为每个网页编写所有唯一的功能和ID名称。

到目前为止我所拥有的：

   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元素以找到合适的同级（上一个为负，下一个为加），然后我们返回同级div并对其进行更改也有孩子。

我们使用新添加的类来区分各种元素类型。

在CSS中，我将ID标识符（＃）更改为使用不必唯一的类标识符（。），因此我们现在将适当的类添加到所有元素。

在HTML中，除了添加了类并删除了不必要的ID外，我们现在还发送元素（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>