-1

这应该是一个相当简单的问题，但我不知道如何解决它，也没有找到任何合适的答案来解决我正在尝试做的事情。

我有一个带有一些文本的 html 文件，用非常简单的术语来说，有一个字符串和两个单选按钮。所以是这样的：

    <html>
    <head>
      <title>Some title</title>
      <script src="jquery.js"></script>
    </head>
    <body>

      <div id="main">
         <p> 10 GB </p>
      </div>

      <div class="radioButtons" style="width: 100%">
        <p><input type="radio" name="radioLessGB" value="Less" align="absmiddle"/> I want less gigabytes(-3GB) </p>
            <p><input type="radio" name="radioMoreGB" value="More" align="absmiddle"/> I want more gigabytes (+5GB)</p>
      </div>
   </body>
   </html>

我需要一种方法来更新文本的值（即“10 GB”），具体取决于所选的单选按钮。特别是，当用户选择第一个单选按钮时，上述字符串中的整数值应立即减少 3 （即“10 GB” - 3 = “7 GB”），如果用户选择第二个单选按钮，整数值应加 5（即“10 GB”+ 5 = “15 GB”）。

为此，我想我必须解析字符串“10 GB”以获取整数值，然后根据选择的单选按钮添加或减去。然后用结果更新字符串。我不希望用户点击某种“提交”按钮，当用户在单选按钮之间切换时，数字的更新应该“即时”完成。

我认为这可以用 jQuery 来完成，我只是不知道该怎么做。有经验的人可以帮助提供简单解决方案的示例代码吗？！？

谢谢！！

4

3 回答 3

1

使用jQuery，您可以简单地执行以下操作。试试这里的演示

$("input").change(function() {
    $("#main").text((10 + parseInt($(this).val())) + " GB");
});

如果您需要在纯 javascript中执行此操作，请使用以下内容。在这里尝试演示

function valChanged(ele) {
    document.getElementById('main1233').textContent = (10 + parseInt(ele.value)) + " GB";
}
于 2013-01-24T14:12:41.980 回答
1

我不会在这里给出完整的代码答案，只是帮助你的指针：

  1. 不要解析字符串来执行计算，只需使用数字（或至少是数字字符串）。将 的值10放在一个特殊data-xxx属性中。您可以稍后通过以下方式访问这些数据$(el).data('xxx')：

    <div id="main" data-value="10">

  2. 对<input>元素执行相同操作以保持“delta”值，例如-3和+5/或将它们各自的值与.val().

  3. 如果单击任何单选按钮（使用 检测事件.on('change', fn)），则将选择的任何增量值添加到 内部的值#main。

  4. 使用显示总和的格式化值.text(sum + ' GB')

于 2013-01-24T14:21:41.890 回答
0

jQuery 是完成这个相当简单的任务的一种途径。你会想要隔离你的#main div。然后使用 jQuery 来获取当前值，并使用单选按钮的 onClick （或在 jQuery: 中）进行数学运算.click(function()。我建议将单选选项的值放在输入标记中。

签出：jQuery中的简单数学

于 2013-01-24T14:15:32.040 回答