Javascript調用僅適用於foreach語句中的第一項

我是mvc的初學者，正在開發電子商務網站。在我的購物車清單中，我需要輸入特定數量來計算總價格。我在foreach語句中使用了java腳本調用，但該調用僅適用於購物車itemlist中的第一個項目。Javascript調用僅適用於foreach語句中的第一項

當我點擊第二或其他項目的「總價」字段，則控制轉到第一個項目的「總價」字段。

我的劇本是

<script> 
    function edValueKeyPress() { 
     var i ; 
     for (i = 0; i < 5; i++) { 
      var edValue = document.getElementById("qt"); 
      var edValue1 = document.getElementById("cprice"); 
      var s = edValue.value * edValue1.value; 
      var t = document.getElementById("total"); 
      t.value = s; 

     }} 
</script>

我的觀點

<table class="table"> 
    @foreach (var item in lscart) 
    { 
     <tr> 
      <td> 
       @{ 
        var base64 = Convert.ToBase64String(item.CImage); 
        var imgSrc = String.Format("data:image/jpg;base64,{0}", base64); 
        <img src='@imgSrc' style="width:100px; height:100px;" /> 
       } 
      </td> 
      <td>@Html.DisplayFor(modelItem => item.CProductName)</td> 
      <td>Rs.</td> 
      <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly",@id="cprice" } })</td> 

      <td> 
       <div class="col-md-6"> 

        @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty",@id="qt" } }) 
       </div> 

      </td> 
      <td> 
       <div> 
        @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total", @onclick = "edValueKeyPress()", @onkeyup = "edValueKeyPress()" } }) 

       </div> 
      </td> 

      <td><a href="#"><i class="fa fa-close"></i></a></td> 
     </tr> 
    } 

</table>

here is the design sample

https://i.stack.imgur.com/MF9pV.png

來源

2017-09-06 PRADEEP

複製'id'屬性是無效的HTML。使用'new {id =「」}'將它們全部刪除，並使用類名和相對選擇器。另請參閱[此答案]（http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943）瞭解如何爲集合生成表單控件 –

您的代碼無效並不能執行。你錯過了一個結束'} –

你的問題是HTML結構的結果，你不能有多個Dom元素具有相同的ID（QT和價格） – FabioG

//視圖

<table class="table"> 

         @{ 
          int i = 0; 

          foreach (var item in lscart) 
          { 
           i = i + 1; 
           <tr> 
            <td> 
             @{ 
           var base64 = Convert.ToBase64String(item.CImage); 
           var imgSrc = String.Format("data:image/jpg;base64,{0}", base64); 
           <img src='@imgSrc' style="width:100px; height:100px;" /> 
             } 
            </td> 
            <td>@Html.DisplayFor(modelItem => item.CProductName)</td> 
            <td>Rs.</td> 
            <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id = "cprice" + @i } })</td> 

            <td> 
             <div class="col-md-6"> 
              @*@Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @onkeyup = "sum()" } })*@ 
              @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id = "qt" + @i } }) 


             </div> 

            </td> 


            <td> 
             <div> 
              @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total" + @i, @onclick = "edValueKeyPress(" + @i + ")", @onkeyup = "edValueKeyPress(" + @i + ")" } }) 

             </div> 
            </td> 

            <td><a href="#"><i class="fa fa-close"></i></a></td> 
           </tr> 
          } 
         } 


        </table>

//腳本

<script> 
    function edValueKeyPress(i) { 


     //alert(i); 
     var edValue = document.getElementById("qt" + i); 
     var edValue1 = document.getElementById("cprice" + i); 
     var s = edValue.value * edValue1.value; 
     var t = document.getElementById("total" + i); 
     t.value = s; 






    } 
</script>

來源

2017-09-07 09:50:15 PRADEEP

您需要添加相同的ID名稱

<table class="table"> 
    @{ 
     var i = 0; // add a variable to get count 
    } 
    @foreach (var item in lscart) 
    { 
     i++; // incrementing for each iteration 
     <tr> 
      <td> 
       @{ 
        var base64 = Convert.ToBase64String(item.CImage); 
        var imgSrc = String.Format("data:image/jpg;base64,{0}", base64); 
        <img src='@imgSrc' style="width:100px; height:100px;" /> 
       } 
      </td> 
      <td> 
       @Html.DisplayFor(modelItem => item.CProductName) 
      </td> 
      <td> 
       Rs. 
      </td> 
      <td> 
       @Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id="cprice_"[email protected] } }) // change id 
      </td> 
      <td> 
       <div class="col-md-6"> 
        @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id="qt_"[email protected] } }) // change id 
       </div> 
      </td> 
      <td> 
       <div> 
        @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total_"[email protected], @onclick = "edValueKeyPress(@i)", @onkeyup = "edValueKeyPress(@i)" } }) // change id and pass value of i in onclick 
       </div> 
      </td> 
      <td> 
       <a href="#"><i class="fa fa-close"></i></a> 
      </td> 
     </tr> 
    } 
</table>

腳本將看起來像這樣

<script> 
    function edValueKeyPress(i) { 
     var edValue = document.getElementById("qt_"+i); 
     var edValue1 = document.getElementById("cprice_"+i); 
     var s = edValue.value * edValue1.value; 
     var t = document.getElementById("total_"+i); 
     t.value = s; 
    } 
</script>

來源

2017-09-06 11:58:02

這段代碼可能有效，可能是由於'}'在末尾提供了右括號。但邏輯看起來很好。 –

Javascript調用僅適用於foreach語句中的第一項

回答

相關問題