jQuery简单计算不工作且不显示任何错误

Question

我想要创建计算器，通过data-filter过滤它。我是编程新手，也是jquery的初学者，所以不要太严格。不过，我编写了脚本，但它不起作用，也没有显示任何错误。

<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate" type="submit">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

$('#calculate').click(function(){
    if ($('#kraska').data('data-filter') == 1) {
        var result = $('#kraska').val() * $('#metr').val(); 
    };

    if ($('#kraska').data('data-filter') == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    };

    $('#result').html(result)
})

​

Answer 1

您需要对代码进行一些更正：

1. 当您使用data方法获取任何数据属性值时，您需要使用属性名而不使用data-部件。
2. 您正在尝试获取select元素的数据属性值，而您已经在option元素上指定了它们。因此，您需要选择:selected选项。
3. 我还删除了按钮的submit类型，尽管您可以在单击处理程序中使用e.preventDefault()来处理它，即使您希望将它保留为type="submit"按钮。

​

$('#calculate').on("click", function(e){
    if ($('#kraska option:selected').data('filter') == 1) {
        var result = $('#kraska').val() * $('#metr').val(); 
    };

    if ($('#kraska option:selected').data('filter') == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    };

    $('#result').html(result)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

​

Answer 2

您需要将data-filter移到('filter')

$('#calculate').click(function(){
    if ($('#kraska').data('filter') == 1) {
        var result = $('#kraska').val() * $('#metr').val(); 
    };

    if ($('#kraska').data('filter') == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    };

    $('#result').html(result)
})

将按钮类型更改为按钮，而不是提交

<button id="calculate" type="button">Calculate</button>

如果它的提交按钮表单不会被提交，并且页面在点击后不会刷新。

Answer 3

将按钮的类型更改为button，而不是提交，这样表单就不会被提交，并且页面在单击时不会刷新，单击事件将触发：

<button id="calculate" type="button ">Calculate</button>

此外，当您使用data-*属性时，您应该只传递没有data-的名称，并且请注意，您希望从选择的选项中获取数据，因此必须将其添加到selecto中，如下所示：

$('#kraska option:selected').data('filter')

注意：--当您想要影响文本时，不必使用html()，最好使用text()。

希望这能有所帮助。

$('#calculate').click(function(){
    var filter = $('#kraska option:selected').data('filter');
  
    if (filter == 1) {
        var result = $('#kraska').val() * $('#metr').val();
    }

    if (filter == 2) {
        var result = $('#kraska').val() / $('#metr').val();
    }

    $('#result').text(result)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <select id="kraska">
      <option value="0.99" data-filter="1">test1</option>
      <option value="4" data-filter="2">test2</option>
    </select>
    <input id="metr" type="text" />
    <button id="calculate" type="button">Calculate</button>
    <p id="result"></p>
</form>
<p id="result"></p>

​