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

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

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

＆＃13;

$('#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)
})

＆＃13;

<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>

＆＃13;

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

$('#kraska').data('data-filter')应为$('#kraska').attr('data-filter')（或$('#kraska').data('filter')，但除非您使用data的功能，否则不需要执行其他操作。

另请注意，val将始终为您提供一个字符串（如果该元素存在）。 *和/将强制为您编号，但记住它仍然有用，因为+ 赢了（您和＃39; ll得到字符串连接）。

;上的阻止后if不正确（但无害）。

请注意，如果您不阻止默认操作，button type="submit"将提交表单。在您的情况下，您不想要提交，因此您需要button type="button"。（您不能只关闭type，默认type为"submit"，因此您需要愚蠢的冗余<button type="button" ...>。

Answer 4

将按钮的类型更改为button而不是提交，这样就不会提交表单，当您点击并点击事件时，页面也不会刷新：

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

另外，当您使用data-*属性时，您应该只传递没有data-的名称，并注意您要从选择的选项中获取数据，因此您必须将其添加到您的选择中，以便它＃39;将会是：

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

注意：如果您想要影响文字，则不必使用html()，如果您使用text()，情况会更好。

希望这会有所帮助。

＆＃13;

$('#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)
})

＆＃13;

<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>

＆＃13;

jQuery简单计算无法正常工作且未显示任何错误

4 个答案: