1

所以我有一个网页，其中有两个用于设置值的滑块和四个单选按钮，用于选择计算操作和一个“计算”按钮。如何检测滑块值和选择了哪个操作，然后相应地计算值并将它们输出到“计算”按钮按下的标签中？注意：我对 javascript/jquery 完全陌生。

代码：

   <!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
              $(function () {
                  $("#slider-range-max").slider({
                      range: "max",
                      min: 1,
                      max: 1000,
                      value: 0,
                      slide: function (event, ui) {
                          $("#amount").val(ui.value);
                      }
                  });
                  $("#amount").val($("#slider-range-max").slider("value"));
              });
        </script>
    </head>
    <body>
        <p>
          <label for="amount">First value:</label>
          <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range-max"></div>
    </body>
</html>


<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
            $(function () {
                $("#slider-range-max2").slider({
                    range: "max",
                    min: 1,
                    max: 1000,
                    value: 0,
                    slide: function (event, ui) {
                        $("#amount2").val(ui.value);
                    }
                });
                $("#amount2").val($("#slider-range-max2").slider("value"));
            });
        </script>
    </head>
    <body>
        <p>
          <label for="amount">Second value:</label>
          <input type="text" id="amount2" style="border: 0; color: #f6931f; font-weight: bold;" />
        </p>
        <div id="slider-range-max2"></div>
    </body>
</html>


<br />
<br />
<br />
<div id=operacija">
    Choose operation:<br />
    <br />
    <html>
        <head>
          <meta charset="utf-8" />
          <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
          <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
          <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
          <link rel="stylesheet" href="/resources/demos/style.css" />
          <script>
              $(function () {
                  $("#radio").buttonset();
              });
          </script>
        </head>
        <body>
        <form>
          <div id="radio">
            <input type="radio" id="radio1" name="radio" /><label for="radio1">Addition</label>
            <input type="radio" id="radio2" name="radio" /><label for="radio2">Substraction</label>
            <input type="radio" id="radio3" name="radio" /><label for="radio3">Multiplication</label>
            <input type="radio" id="radio4" name="radio" /><label for="radio4">Division</label>
          </div>
        </form>
        </body>
    </html>
</div>
<br />
<br />

<div id="gumb1">
<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
                $(function () {
                  $("button").button().click(function (event) {
                  event.preventDefault();
              });
              });
        </script>
    </head>
    <body> 
        <button>Calculate</button> 
    </body>
</html>
</div>

<br />
<br />
<div id=rezultat">
    <label for="amount">Result:</label>
    <input type="text" id="Text1" style="border: 0; color: #f6931f; font-weight: bold;" />
</div>
4

1 回答 1

0

我知道很多人说你应该处理你的 HTML。是的，我也这么认为，但是当我尝试学习时，我自己也学到了很多观看示例（javascript 或 php）。所以我决定向你展示如何做到这一点。当然，你会从中学习，或者只是复制它并使用它。由你决定。我只是希望你能试着理解它。

$("button").button().click(function (event) {
     event.preventDefault();
     var value1 = parseInt($("#amount").val()); //get value of first slider
     var value2 = parseInt($("#amount2").val()); //value of second slider
     var result = 0;
     var radioval = $('input[name=radio]:checked', '#myForm').val(); //get value of the radio bytton

     //calculations depending of chose of the radio button
     if (radioval == "Addition") result = value1 + value2;
     else if (radioval == "Substraction") result = value1 - value2;
     else if (radioval == "Multiplication") result = value1 * value2;
     else if (radioval == "Division") result = value1 / value2;

     $("#resultlabel").text("Result: " + result); //show result
 });

整个代码，有一些修复（我删除了 div 中的 head/html/body 标记）你可以在这里找到：http: //jsfiddle.net/k9rGx/9/

请记住，您只需<head></head>在网站顶部的标签中链接一次 .js 和 .css 文件。您不需要每次使用 javascript 时都这样做。它适用于整个站点。

我只是希望它能帮助你学习新的东西。

于 2013-03-18T08:25:32.800 回答