Question

我是JS / jQuery的新手，所以请对我温柔:)。这是我在jsfiddler.net上遇到的问题： http://jsfiddle.net/_Arn__/n3oakxhd/2/

我在同一页面上有几个相同的表单，它们共享相同的类和相同的结构，但具有不同的数值。我做了一个小脚本来做数学（一个简单的添加），但是当我运行脚本时，只计算第一个表单的值，而在其他表单上显示的结果是第一个表单中的结果。

是否可以保持相同的结构并为每个表单显示特定的结果？

$( 'form' ).each(function(){ 
  var ligne_somme_1 = parseFloat($( ".ligne_somme_1" ).text()); 
 var ligne_somme_2 = parseFloat($( ".ligne_somme_2" ).text());
 var ligne_somme_3 = parseFloat($( ".ligne_somme_3" ).text());  
 var total= ligne_somme_1 + ligne_somme_2 + ligne_somme_3 ;	
 var afficheTotal = $( ".ligne_somme_4" );
     $( afficheTotal ).text( total) ;
});

<form class="Aform">
  <li class="total_ligne_01 lignes">
    <div class="ligne_somme_1 lignes_somme">5$</div>
  </li>
  <li class="total_ligne_01b lignes">
+    <div class="ligne_somme_2 lignes_somme">5$</div> 
  </li>
  <li class="total_ligne_03 lignes">
  +  <div class="ligne_somme_3 lignes_somme">5.5$</div> = 
  </li>
  <li class="total_ligne_04 lignes">
    <div class="ligne_somme_4 lignes_somme"></div> 
  </li>
</form>

<hr />

<form class="Aform">
  <li class="total_ligne_01 lignes">
   <div class="ligne_somme_1 lignes_somme">10$</div>  
  </li>
  <li class="total_ligne_01b lignes">
 +   <div class="ligne_somme_2 lignes_somme">10$</div> 
  </li>
  <li class="total_ligne_03 lignes">
  +  <div class="ligne_somme_3 lignes_somme">10$</div> =
  </li>
  <li class="total_ligne_04 lignes">
    <div class="ligne_somme_4 lignes_somme"></div>
  </li>
</form>

感谢您的阅读。阿恩

Answer 1

您应该使用$(this)内的each引用来引用当前表单：

$('form').each(function() {
    var $this = $(this); // Caching

    var ligne_somme_1 = parseFloat($this.find(".ligne_somme_1").text());
    var ligne_somme_2 = parseFloat($this.find(".ligne_somme_2").text());
    var ligne_somme_3 = parseFloat($this.find(".ligne_somme_3").text());
    var total = ligne_somme_1 + ligne_somme_2 + ligne_somme_3;

    $this.find(".ligne_somme_4").text(total);
});

演示：https://jsfiddle.net/tusharj/n3oakxhd/3/

感谢@plalx：

$('form').each(function() {
    var $lines = $(this).find('.lignes_somme'),
        total = 0;
    $lines.filter(':not(:last)').each(function() {
        total += parseFloat(this.textContent);
    });
    $lines.last().html(total);
});

演示：https://jsfiddle.net/tusharj/n3oakxhd/4/

多个相同的表单共享相同的类

1 个答案: