javascript - 让 jquery 使用十进制选项值

Question

我需要帮助才能使此截图显示值 5.5 和 6.5(选项值是十进制数)

$(function() {
  $('#percentage_select').change(function() {
    $('.rates').hide();
    $('#' + $(this).val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="percentage_select" name="percentage">
  <option value="5">5%</option>
  <option value="5.5">5,5%</option>
  <option value="6">6%</option>
  <option value="6.5">6,5%</option>
  <option value="7">7%</option>
</Select>
<div id="5" class="rates"> <a href="#1">First link</a> </div>
<div id="5.5" class="rates" style="display:none"> <a href="#2">Second link</a> </div>
<div id="6" class="rates" style="display:none"> <a href="#3">Thirdlink</a> </div>
<div id="6.5" class="rates" style="display:none"> <a href="#4">Forth link</a> </div>
<div id="7" class="rates" style="display:none"> <a href="#5">Fifth link</a> </div>

我尝试将 value 设置为 parse ，但没​​有成功。

Answer 1

自从“.” jquery 使用 jquery 来按其类捕获 elemets，我相信这会在这种情况下产生问题。您需要使用“\\”进行转义。您可以使用这个示例，但要知道这是一种肮脏的方式。例如，如果您将此代码与类选择器一起使用，而不是像这里那样与 id 选择器一起使用，我敢打赌这会给您带来另一个问题。您必须使用更好的 id 格式。

$(function() {
        $('#percentage_select').change(function(){
            $('.rates').hide();
            $('#' + $(this).val().replace(".","\\.")).show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select id="percentage_select" name="percentage">
                                <option value="5">5%</option>
                                <option value="5.5">5,5%</option>
                                <option value="6">6%</option>
                                <option value="6.5">6,5%</option>
                                <option value="7">7%</option>
                                </Select>
<div id="5" class="rates"> <a href="#1">First link</a> </div>
<div id="5.5" class="rates" style="display:none"> <a href="#2">Second link</a> </div>
<div id="6" class="rates" style="display:none"> <a href="#3">Thirdlink</a> </div>
<div id="6.5" class="rates" style="display:none"> <a href="#4">Forth link</a> </div>
<div id="7" class="rates" style="display:none"> <a href="#5">Fifth link</a> </div>