动态输入字段和显示信息

时间:2014-06-13 18:16:26

标签: javascript jquery

您好我对jQuery知之甚少,也许有人可以看看,这里是:

jQuery(function($) {
  $('#precoInserido').bind('keydown keyup keypress', function() {
    $('#precoVer').html(this.value || "??");
  });
});

jsfiddle.net/5LrQk/1/

基本上问题是我必须在页面中自动显示该值,如果您填写价格的输入字段,则会显示价格,但是我需要对其中显示的内容进行一些更改销售“,它应该显示产品价格的价值 - 1,00€ - 产品全价的1%。然后我需要在“和每个会员”之后说出的部分显示原始值的结果减去插入佣金输入字段的佣金的值。抱歉我的英文。

5 个答案:

答案 0 :(得分:0)

我不知道你对“之前的价值”是什么意思,因此不包括会员价格数学。我相信你可以自己搞清楚。

// we want the values to update on keypress on either input field,
// thus we use input[type=text] as our selector.
$('input[type=text]').bind('keydown keyup keypress', function () {
    // we save the price and commission to variables for easy access
    // we also make sure they're numbers instead of strings with parseFloat()
    var price = parseFloat($("#precoInserido").val());
    var commission = parseFloat($("#comission").val());

    $('#precoVer').html(price);
    // we calculate and insert the sale profit
    $("#sale").html( ( (price - 1) * 0.01).toFixed(2) );
    // we calculate and insert the commission
    $("#affiliate").html(); // put your math here
});

jsFiddle

答案 1 :(得分:0)

选中 Demo Fiddle

HTML更改:

<br />Your product costs € <span id='precoVer'>??</span>. 
You receive from each sale €<span id='precoVer1'>??</span> 
and for each affiliate <span id='diff'>??</span> € .

JS改变:

jQuery(function ($) {

    $('#precoInserido').bind('keydown keyup keypress', function () {
        $('#precoVer').html(this.value || "??");
        $('#precoVer1').html(parseInt(this.value).toFixed(2) || "??");
        $('#diff').html(parseInt(this.value) - parseInt($('#comission').val()));
    });

    $('#comission').bind('keydown keyup keypress', function () {

        $('#diff').html(parseInt($('#precoInserido').val()) - parseInt(this.value));
    });

});

答案 2 :(得分:0)

说实话,我不完全确定你在产生联盟定价的数学方面的想法,但我抓住了我认为你需要的东西。

http://jsfiddle.net/5LrQk/14/

jQuery(function($) {

  $('#precoInserido').bind('keydown keyup keypress', function() {
    $('#precoVer, #uservalue').html(this.value || "??");
    $('#comission').trigger('keydown');
  });
  $('#comission').bind('keydown keyup keypress', function() {
    $('#affiliatevalue').html(this.value || "??");
      var currVal = this.value;
      var fullPrice =  $('#precoInserido').val() || false;
      if( fullPrice ){

          $('#uservalue').html(function(){
              var uv = parseInt( ( fullPrice - 1 ) ) - ( fullPrice / 10 );
              $('#affiliatevalue').html(function(){
                 return ( ( uv * ( currVal / 100 ) ).toFixed(2) );
              });
              return uv;
          });
      }

  });

});

你的HTML:

  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Charge from the house: 1,00€ - 1% full price<br /><br />

Price: <input id='precoInserido' type="text"  name="preco"  /><br />
Comission Affiliate: <input id='comission' type="text"  name="comission"  /><br />
Your product costs € <span id='precoVer'>0</span>. You receive from each sale <span id='uservalue'>0</span> € and for each affiliate <span id='affiliatevalue'>0</span>€ .

答案 3 :(得分:0)

价格:

<input id='precoInserido' type="text" name="preco" /><br />
Comission Affiliate: <input id='comission' type="text" name="comission" /><br />
Your product costs € <span id='precoVer'>??</span>. You receive from each sale        <span id='preDisc'>???</span>
€ and for each affiliate <span id='affiliate'>??</span>€ .
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
            $(function () {
                $('#comission').bind('keyup', function () {
                 var comission = parseFloat(this.value);
                 var prodPrice = parseInt($('#precoInserido').val());
                 var comissionRate = prodPrice * comission / 100;
                 var discountPrice = prodPrice - comissionRate;
                 $('#precoVer').html(prodPrice || "??");
                 $('#preDisc').html(discountPrice || "??");
                 $('#affiliate').html(comissionRate || "??");
            });
        });
</script>

答案 4 :(得分:0)

您需要在<span>标记中包含要更改的值,按类或ID定位它们,计算要在事件处理程序中更改的值,然后更改值。

<div>
    Charge from the house: 1,00€ - 1% full price
    <br /><br />
    Price: <input id='precoInserido' type="text"  name="preco"  />
    <br />
    Comission Affiliate: <input id='comission' type="text"  name="comission"  />
    <br />
    Your product costs € <span id='precoVer'>??</span>.
    You receive from each sale <span id='saleCommission'>???</span>€
    and for each affiliate <span id='affiliateCommission>???</span>€.
</div>

处理这个问题的逻辑是这样的:

$('#precoInserido').bind('keydown keyup keypress', function() {
    var price = $('#precoVer').val();
    var saleCommission;      // = your math, rounding, and formatting here
    var affiliateCommission; // = your math, rounding, and formatting here
    $('#precoVer').html(this.value || "??");
    $('#saleCommission').html(saleCommission || "??");
    $('#affiliateCommission').html(affiliateCommission || "??");
});

话虽如此,你可以采取一些措施来清理它。

  • .bind()应替换为.on()。虽然它尚未被弃用,但它不再是附加事件处理程序的首选方式。
  • 在这种情况下,更改#precoVer和公司的值时,最好使用.text()而不是.html(),因为您要更改内容,而不是布局。< / LI>
  • 尝试为变量分配默认值,而不是在DOM操作中。 ternary conditional operator对此有好处。
  • 我怀疑你没有关键事件的细节。这是一个很好的阅读,以了解它们之间的区别。 http://www.quirksmode.org/dom/events/keys.html
  • 在此实例中,请考虑使用<p>标记而不是<br />。他们会为您提供您正在寻找的间距。