Question

我设法根据2个下拉列表和一个查找表来查找乘数，从而进行了计算。现在我需要添加几个基于3下拉值的异常情况，我们将找到正确的表名和乘数。有效的jQuery：

以下内容适用于“产品来源和数量”下拉菜单：

电笔链接：https://codepen.io/dunya/pen/VRMgdK

    $("input[type='text'].element").blur(function(e) {
    var result = $("<span name='result'>");
    var multiplier = $(`table#${$("#ProductOrigin").val()} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#Volume>option:selected").val()}']`).text();
    $(this).next("span").remove();
    result.text($(this).val() * multiplier);
$(this).after(result);});

例如，当我为新规则添加了一个额外的下拉菜单时，以下内容将不起作用：如果 productOrigin = Europe 和 geoLocation = England 使用查找表名称为“ England ”

“为什么此代码不起作用？我认为这行有问题

var multiplierEngland = $（{table#${'England'} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#Volume>option:selected").val()}']）。text（）;

它不进行计算非常感谢您的帮助。

var result = $("<span name='result'>");
$("#GeoLocation").change(function() {
  var geoLocation = this.value;
  var productOrigin = $('#ProductOrigin').val();
  console.log(geoLocation, productOrigin);
  // to validate that geoLocation and productOrigin meet my requirement if it is then do the calculation bases on table Nane "England"
  if (geoLocation === "England" || productOrigin === "Europe") {
    var multiplierEngland = $(`table#${'England'} tbody > tr[product='${$(this).attr("id")}'] > td[volume='${$("#Volume>option:selected").val()}']`).text();
    $(this).next("span").remove();
    result.text($(this).val() * multiplierEngland);
    $(this).after(result);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label class="description" for="ProductOrigin">Product Origin</label>
  <select class="element select medium" id="ProductOrigin" name="ProductOrigin">
    <option value="" selected="selected"></option>
    <option value="Europe">Europe</option>
    <option value="Asia">Asia</option>
    <option value="China">China</option>
    <option value="India">India</option>
    <option value="USA">USA</option>
    <option value="Africa">Africa</option>
  </select>
</div>

<div>
  <label class="description" for="GeoLocation">Geographical Location</label>
  <select class="element select medium" id="GeoLocation" name="GeoLocation">
    <option value="" selected="selected"></option>
    <option value="England">England</option>
    <option value="Scotland">Scotland</option>
    <option value="Wales">Wales</option>
  </select>
</div>
<div>
  <label class="description" for="Volume">Volume</label>
  <select class="element select medium" id="Volume" name="Volume">
    <option value="" selected="selected"></option>
    <option value="10">10</option>
    <option value="100">100</option>
    <option value="1000">1000</option>
    <option value="2000">2000</option>
    <option value="3000">3000</option>
    <option value="4000">4000</option>
    <option value="5000">5000</option>
    <option value="6000">6000</option>
    <option value="6000">6000</option>
    <option value="8000">8000</option>
    <option value="9000">9000</option>
    <option value="10000">10000</option>
    <option value="20000">20000</option>
    <option value="30000">30000</option>
    <option value="40000">40000</option>
    <option value="50000">50000</option>
  </select>
</div>
<div>
  <label class="description" for="Apple">Apple</label>
  <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Apricot">Apricot</label>
  <input id="Apricot" name="Apricot" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Banana">Banana</label>
  <input id="Banana" name="Banana" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Bilberry">Bilberry</label>
  <input id="Bilberry" name="Bilberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Blackberry">Blackberry</label>
  <input id="Blackberry" name="Blackberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Blackcurrant">Blackcurrant</label>
  <input id="Blackcurrant" name="Blackcurrant" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Blueberry">Blueberry</label>
  <input id="Blueberry" name="Blueberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Boysenberry">Boysenberry</label>
  <input id="Boysenberry" name="Boysenberry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Cherry">Cherry</label>
  <input id="Cherry" name="Cherry" class="element text medium" type="text" maxlength="255" value="" />
</div>
<div>
  <label class="description" for="Coconut">Coconut</label>
  <input id="Coconut" name="Coconut" class="element text medium" type="text" maxlength="255" value="" />
</div>


<table id="Europe">
  <thead>Europe</thead>
  <tr>
    <td>Europe</td>
    <th id=10>10</th>
    <th id=100>100</th>
    <th id=1000>1000</th>
    <th id=2000>2000</th>
    <th id=3000>3000</th>
    <th id=4000>4000</th>
    <th id=5000>5000</th>
    <th id=6000>6000</th>
    <th id=7000>7000</th>
    <th id=8000>8000</th>
    <th id=9000>9000</th>
    <th id=10000>10000</th>
    <th id=20000>20000</th>
    <th id=30000>30000</th>
    <th id=40000>40000</th>
    <th id=50000>50000</th>
  </tr>
  <tbody>
    <tr product='Apple'>
      <td>Apple</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
      <td volume='2000'>2</td>
      <td volume='3000'>3</td>
      <td volume='4000'>4</td>
      <td volume='5000'>5</td>
      <td volume='6000'>6</td>
      <td volume='7000'>7</td>
      <td volume='8000'>8</td>
      <td volume='9000'>9</td>
      <td volume='10000'>10</td>
      <td volume='20000'>11</td>
      <td volume='30000'>12</td>
      <td volume='40000'>13</td>
      <td volume='50000'>14</td>
    </tr>
    <tr product='Apricot'>
      <td>Apricot</td>
      <td volume='10'>0</td>
      <td volume='100'>0</td>
      <td volume='1000'>0</td>
      <td volume='2000'>0.5</td>
      <td volume='3000'>1</td>
      <td volume='4000'>1.5</td>
      <td volume='5000'>2</td>
      <td volume='6000'>2.5</td>
      <td volume='7000'>3</td>
      <td volume='8000'>3.5</td>
      <td volume='9000'>4</td>
      <td volume='10000'>4.5</td>
      <td volume='20000'>5</td>
      <td volume='30000'>5.5</td>
      <td volume='40000'>6</td>
      <td volume='50000'>7</td>
    </tr>
    <tr product='Banana'>
      <td>Banana</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
      <td volume='2000'>5</td>
      <td volume='3000'>10</td>
      <td volume='4000'>15</td>
      <td volume='5000'>20</td>
      <td volume='6000'>25</td>
      <td volume='7000'>27</td>
      <td volume='8000'>30</td>
      <td volume='9000'>33</td>
      <td volume='10000'>36</td>
      <td volume='20000'>40</td>
      <td volume='30000'>45</td>
      <td volume='40000'>50</td>
      <td volume='50000'>55</td>
    </tr>
    <tr product='Bilberry'>
      <td>Bilberry</td>
      <td volume='10'>1</td>
      <td volume='100'>5</td>
      <td volume='1000'>10</td>
      <td volume='2000'>15</td>
      <td volume='3000'>20</td>
      <td volume='4000'>25</td>
      <td volume='5000'>30</td>
      <td volume='6000'>35</td>
      <td volume='7000'>40</td>
      <td volume='8000'>45</td>
      <td volume='9000'>50</td>
      <td volume='10000'>55</td>
      <td volume='20000'>60</td>
      <td volume='30000'>65</td>
      <td volume='40000'>70</td>
      <td volume='50000'>75</td>
    </tr>
    <tr product='Blackberry'>
      <td>Blackberry</td>
      <td volume='10'>0.1</td>
      <td volume='100'>5</td>
      <td volume='1000'>10</td>
      <td volume='2000'>20</td>
      <td volume='3000'>50</td>
      <td volume='4000'>75</td>
      <td volume='5000'>100</td>
      <td volume='6000'>125</td>
      <td volume='7000'>150</td>
      <td volume='8000'>175</td>
      <td volume='9000'>200</td>
      <td volume='10000'>225</td>
      <td volume='20000'>250</td>
      <td volume='30000'>275</td>
      <td volume='40000'>300</td>
      <td volume='50000'>350</td>
    </tr>
    <tr product='Blackcurrant'>
      <td>Blackcurrant</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
      <td volume='2000'>2</td>
      <td volume='3000'>2</td>
      <td volume='4000'>4</td>
      <td volume='5000'>4</td>
      <td volume='6000'>4</td>
      <td volume='7000'>6</td>
      <td volume='8000'>6</td>
      <td volume='9000'>6</td>
      <td volume='10000'>8</td>
      <td volume='20000'>8</td>
      <td volume='30000'>10</td>
      <td volume='40000'>12</td>
      <td volume='50000'>14</td>
    </tr>
    <tr product='Blueberry'>
      <td>Blueberry</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.5</td>
      <td volume='1000'>1</td>
      <td volume='2000'>4</td>
      <td volume='3000'>6</td>
      <td volume='4000'>8</td>
      <td volume='5000'>10</td>
      <td volume='6000'>12</td>
      <td volume='7000'>14</td>
      <td volume='8000'>16</td>
      <td volume='9000'>18</td>
      <td volume='10000'>20</td>
      <td volume='20000'>24</td>
      <td volume='30000'>28</td>
      <td volume='40000'>30</td>
      <td volume='50000'>36</td>
    </tr>
    <tr product='Boysenberry'>
      <td>Boysenberry</td>
      <td volume='10'>0.5</td>
      <td volume='100'>1</td>
      <td volume='1000'>2.5</td>
      <td volume='2000'>4</td>
      <td volume='3000'>5.5</td>
      <td volume='4000'>7</td>
      <td volume='5000'>8.5</td>
      <td volume='6000'>10</td>
      <td volume='7000'>11.5</td>
      <td volume='8000'>13</td>
      <td volume='9000'>14.5</td>
      <td volume='10000'>16</td>
      <td volume='20000'>17.5</td>
      <td volume='30000'>19</td>
      <td volume='40000'>20.5</td>
      <td volume='50000'>22</td>
    </tr>
    <tr product='Cherry'>
      <td>Cherry</td>
      <td volume='10'>0.5</td>
      <td volume='100'>1</td>
      <td volume='1000'>2.5</td>
      <td volume='2000'>5</td>
      <td volume='3000'>8</td>
      <td volume='4000'>10</td>
      <td volume='5000'>15</td>
      <td volume='6000'>20</td>
      <td volume='7000'>25</td>
      <td volume='8000'>28</td>
      <td volume='9000'>31</td>
      <td volume='10000'>35</td>
      <td volume='20000'>40</td>
      <td volume='30000'>45</td>
      <td volume='40000'>50</td>
      <td volume='50000'>55</td>
    </tr>
    <tr product='Coconut'>
      <td>Coconut</td>
      <td volume='10'>0.1</td>
      <td volume='100'>0.25</td>
      <td volume='1000'>0.5</td>
      <td volume='2000'>0.5</td>
      <td volume='3000'>1</td>
      <td volume='4000'>1</td>
      <td volume='5000'>2</td>
      <td volume='6000'>2</td>
      <td volume='7000'>2</td>
      <td volume='8000'>2</td>
      <td volume='9000'>2.5</td>
      <td volume='10000'>2.5</td>
      <td volume='20000'>3</td>
      <td volume='30000'>3</td>
      <td volume='40000'>3</td>
      <td volume='50000'>3</td>
    </tr>
  </tbody>
</table>

<table id="England">
  <thead>England</thead>
  <tr>
    <td>England</td>
    <th id=10>10</th>
    <th id=100>100</th>
    <th id=1000>1000</th>
    <th id=2000>2000</th>
    <th id=3000>3000</th>
    <th id=4000>4000</th>
    <th id=5000>5000</th>
    <th id=6000>6000</th>
    <th id=7000>7000</th>
    <th id=8000>8000</th>
    <th id=9000>9000</th>
    <th id=10000>10000</th>
    <th id=20000>20000</th>
    <th id=30000>30000</th>
    <th id=40000>40000</th>
    <th id=50000>50000</th>
  </tr>
  <tbody>
    <tr product='Apple'>
      <td>Apple</td>
      <td volume='10'>10</td>
      <td volume='100'>10</td>
      <td volume='1000'>10</td>
      <td volume='2000'>20</td>
      <td volume='3000'>30</td>
      <td volume='4000'>40</td>
      <td volume='5000'>50</td>
      <td volume='6000'>60</td>
      <td volume='7000'>70</td>
      <td volume='8000'>80</td>
      <td volume='9000'>90</td>
      <td volume='10000'>100</td>
      <td volume='20000'>110</td>
      <td volume='30000'>120</td>
      <td volume='40000'>130</td>
      <td volume='50000'>140</td>
    </tr>
    <tr product='Apricot'>
      <td>Apricot</td>
      <td volume='10'>10</td>
      <td volume='100'>10</td>
      <td volume='1000'>10</td>
      <td volume='2000'>20</td>
      <td volume='3000'>30</td>
      <td volume='4000'>40</td>
      <td volume='5000'>50</td>
      <td volume='6000'>60</td>
      <td volume='7000'>70</td>
      <td volume='8000'>80</td>
      <td volume='9000'>90</td>
      <td volume='10000'>100</td>
      <td volume='20000'>110</td>
      <td volume='30000'>120</td>
      <td volume='40000'>130</td>
      <td volume='50000'>140</td>
    </tr>
    <tr product='Banana'>
      <td>Banana</td>
      <td volume='10'>1</td>
      <td volume='100'>5</td>
      <td volume='1000'>1</td>
      <td volume='2000'>5</td>
      <td volume='3000'>10</td>
      <td volume='4000'>15</td>
      <td volume='5000'>20</td>
      <td volume='6000'>25</td>
      <td volume='7000'>27</td>
      <td volume='8000'>30</td>
      <td volume='9000'>33</td>
      <td volume='10000'>36</td>
      <td volume='20000'>40</td>
      <td volume='30000'>45</td>
      <td volume='40000'>50</td>
      <td volume='50000'>55</td>
    </tr>
    <tr product='Bilberry'>
      <td>Bilberry</td>
      <td volume='10'>1</td>
      <td volume='100'>5</td>
      <td volume='1000'>10</td>
      <td volume='2000'>15</td>
      <td volume='3000'>20</td>
      <td volume='4000'>25</td>
      <td volume='5000'>30</td>
      <td volume='6000'>35</td>
      <td volume='7000'>40</td>
      <td volume='8000'>45</td>
      <td volume='9000'>50</td>
      <td volume='10000'>55</td>
      <td volume='20000'>60</td>
      <td volume='30000'>65</td>
      <td volume='40000'>70</td>
      <td volume='50000'>75</td>
    </tr>
    <tr product='Blackberry'>
      <td>Blackberry</td>
      <td volume='10'>0.1</td>
      <td volume='100'>5</td>
      <td volume='1000'>10</td>
      <td volume='2000'>20</td>
      <td volume='3000'>50</td>
      <td volume='4000'>75</td>
      <td volume='5000'>100</td>
      <td volume='6000'>125</td>
      <td volume='7000'>150</td>
      <td volume='8000'>175</td>
      <td volume='9000'>200</td>
      <td volume='10000'>225</td>
      <td volume='20000'>250</td>
      <td volume='30000'>275</td>
      <td volume='40000'>300</td>
      <td volume='50000'>350</td>
    </tr>
    <tr product='Blackcurrant'>
      <td>Blackcurrant</td>
      <td volume='10'>20</td>
      <td volume='100'>5</td>
      <td volume='1000'>1</td>
      <td volume='2000'>2</td>
      <td volume='3000'>2</td>
      <td volume='4000'>4</td>
      <td volume='5000'>4</td>
      <td volume='6000'>4</td>
      <td volume='7000'>6</td>
      <td volume='8000'>6</td>
      <td volume='9000'>6</td>
      <td volume='10000'>8</td>
      <td volume='20000'>8</td>
      <td volume='30000'>10</td>
      <td volume='40000'>12</td>
      <td volume='50000'>14</td>
    </tr>
    <tr product='Blueberry'>
      <td>Blueberry</td>
      <td volume='10'>41</td>
      <td volume='100'>51</td>
      <td volume='1000'>1</td>
      <td volume='2000'>4</td>
      <td volume='3000'>6</td>
      <td volume='4000'>8</td>
      <td volume='5000'>10</td>
      <td volume='6000'>12</td>
      <td volume='7000'>14</td>
      <td volume='8000'>16</td>
      <td volume='9000'>18</td>
      <td volume='10000'>20</td>
      <td volume='20000'>24</td>
      <td volume='30000'>28</td>
      <td volume='40000'>30</td>
      <td volume='50000'>36</td>
    </tr>
    <tr product='Boysenberry'>
      <td>Boysenberry</td>
      <td volume='10'>500</td>
      <td volume='100'>10</td>
      <td volume='1000'>25</td>
      <td volume='2000'>4</td>
      <td volume='3000'>5</td>
      <td volume='4000'>7</td>
      <td volume='5000'>8</td>
      <td volume='6000'>10</td>
      <td volume='7000'>15</td>
      <td volume='8000'>13</td>
      <td volume='9000'>14</td>
      <td volume='10000'>16</td>
      <td volume='20000'>175</td>
      <td volume='30000'>19</td>
      <td volume='40000'>205</td>
      <td volume='50000'>22</td>
    </tr>
    <tr product='Cherry'>
      <td>Cherry</td>
      <td volume='10'>0.5</td>
      <td volume='100'>1</td>
      <td volume='1000'>2.5</td>
      <td volume='2000'>5</td>
      <td volume='3000'>8</td>
      <td volume='4000'>10</td>
      <td volume='5000'>15</td>
      <td volume='6000'>20</td>
      <td volume='7000'>25</td>
      <td volume='8000'>28</td>
      <td volume='9000'>31</td>
      <td volume='10000'>35</td>
      <td volume='20000'>40</td>
      <td volume='30000'>45</td>
      <td volume='40000'>50</td>
      <td volume='50000'>55</td>
    </tr>
    <tr product='Coconut'>
      <td>Coconut</td>
      <td volume='10'>41</td>
      <td volume='100'>5</td>
      <td volume='1000'>115</td>
      <td volume='2000'>445</td>
      <td volume='3000'>1</td>
      <td volume='4000'>1</td>
      <td volume='5000'>2</td>
      <td volume='6000'>2</td>
      <td volume='7000'>2</td>
      <td volume='8000'>2</td>
      <td volume='9000'>2</td>
      <td volume='10000'>14</td>
      <td volume='20000'>3</td>
      <td volume='30000'>3</td>
      <td volume='40000'>3</td>
      <td volume='50000'>3</td>
    </tr>
  </tbody>
</table>

Answer 1

这是一个有效的Codepen：https://codepen.io/anon/pen/RdjGod

下面是必需的JavaScript，带注释（我强烈建议养成注释代码的习惯-这样可以使其他人更容易快速理解它）：

$("input[type='text'].element").blur(function(e) {

    // Current product ID, e.g. "Apple", "Apricot", etc.
    var currentProductId = this.id;

    // Volume of products.
    var volume = $("#Volume").val();

    // Product origin.
    var productOrigin = $("#ProductOrigin").val();

    // Ensure volume and product origin have been selected.
    if (volume === "" || productOrigin === "") {
        alert("Please select the product origin and volume.");
        return;
    }

    // Geographical location of the product.
    var geographicalLocation = $("#GeoLocation").val();

    // If no geographical location is set, use productOrigin.
    var tableToUse = geographicalLocation === "" ? productOrigin : geographicalLocation;

    // Amount to multiply.
    var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();

    // A <span> element, to be populated with the calculated product volume.
    var result = $("<span name='result'>");

    // Calculate the figure and update the result element.
    result.text($(this).val() * multiplier);

    // Remove any previously added <span> result elements.
    $(this).next("span").remove();

    // Insert result after the current input field.
    $(this).after(result);
})

基于3下拉菜单和查找表的计算

1 个答案: