9

我有两个按钮，如果我单击某个按钮，我需要更改输入文本中的值并更改总价（产品价格 * 按钮的值 - 2 或 4 个数量）。

我知道这很简单，但我不擅长 javascript 或 jQuery。最好在 jsfiddle 中回答。
我的 jsfiddle 在这里http://jsfiddle.net/J7m7m/1/

我的简单代码：

Product price: $500
<br>
Total price: $500
<br>
<input type="button" onclick="change()" value="2&#x00A;Qty">
<input type="button" value="4&#x00A;Qty">
<br>
Total <input type="text" id="count" value="1">
4

6 回答 6

23

这种情况下使用 jQuery 的另一个简单解决方案。请记住，使用内联 JavaScript 不是一个好习惯。

提琴手

我在总价和按钮上添加了 html 的 ID。这是jQuery。

$('#two').click(function(){
    $('#count').val('2');
    $('#total').text('Product price: $1000');
});

$('#four').click(function(){
    $('#count').val('4');
    $('#total').text('Product price: $2000');
});
于 2013-09-11T12:28:13.267 回答
8

试试这个（简单的javascript）：-

 <!DOCTYPE html>
    <html>
       <script>
          function change(value){
          document.getElementById("count").value= 500*value;
          document.getElementById("totalValue").innerHTML= "Total price: $" + 500*value;
          }
          
       </script>
       <body>
          Product price: $500
          <br>
          <div id= "totalValue">Total price: $500 </div>
          <br>
          <input type="button" onclick="change(2)" value="2&#x00A;Qty">
          <input type="button" onclick="change(4)" value="4&#x00A;Qty">
          <br>
          Total <input type="text" id="count" value="1">
       </body>
    </html>

希望对你有帮助..

于 2013-09-11T12:18:50.430 回答
2

使用 html5 数据属性...

试试这个

html

Product price: $<span id="product_price">500</span>

<br>Total price: $500
<br>
<input type="button" data-quantity="2" value="2&#x00A;Qty">
<input type="button" data-quantity="4" class="mnozstvi_sleva" value="4&#x00A;Qty">
<br>Total
<input type="text" id="count" value="1">

JS

$(function(){
$('input:button').click(function () {
  $('#count').val($(this).data('quantity') * $('#product_price').text());
});
});

在这里摆弄

于 2013-09-11T12:11:50.723 回答
2

这是非 jQuery 答案。

小提琴：http: //jsfiddle.net/J7m7m/7/

function changeText(value) {
     document.getElementById('count').value = 500 * value;   
}

HTML轻微修改：

Product price: $500
<br>
Total price: $500
<br>
<input type="button" onclick="changeText(2)" value="2&#x00A;Qty">
<input type="button" class="mnozstvi_sleva" value="4&#x00A;Qty" onClick="changeText(4)">
<br>
Total <input type="text" id="count" value="1"/>

编辑：很明显，这是一种不受欢迎的方式，如下所述（我有它来了）。所以从本质上讲，这就是你在普通的旧 javascript 中所做的事情。大多数人会出于充分的理由建议您使用 jQuery（其他答案有 jQuery 版本）。

于 2013-09-11T12:14:23.447 回答
0

这对你来说很好

   <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
    function myfun(){
    $(document).ready(function(){

        $("#select").click(
        function(){
        var data=$("#select").val();
            $("#disp").val(data);
                            });
    });
    }
    </script>
    </head>
    <body>
    <p>id <input type="text" name="user" id="disp"></p>
    <select id="select" onclick="myfun()">
    <option name="1"value="one">1</option>
    <option name="2"value="two">2</option>
    <option name="3"value="three"></option>
    </select>
    </body>
    </html>
于 2018-03-16T07:43:09.693 回答
-1

我的尝试（JsFiddle）

Javascript

$(document).ready(function () {
    $('#buttons input[type=button]').on('click', function () {
        var qty = $(this).data('quantity');
        var price = $('#totalPrice').text(); 
        $('#count').val(price * qty);
    });
});

html

  Product price:$500
<br>Total price: $<span id='totalPrice'>500</span>
<br>
<div id='buttons'>
    <input id='qty2' type="button" data-quantity='2' value="2&#x00A;Qty">
    <input id='qty2' type="button" class="mnozstvi_sleva" data-quantity='4' value="4&#x00A;Qty">
</div>
<br>Total
<input type="text" id="count" value="1">
于 2013-09-11T12:16:45.977 回答