获取循环外的数据在 JQuery 中

huangapple go评论69阅读模式
英文:

Get data outside Loop in JQuery

问题

I can help you with the translation. Here is the translated text:

当我尝试在点击获取所有输入类型数据时控制台数据时,它返回`未定义`。我想要的只是获取每个输入类型的值,并使用`push`将其存储在列表中,我应该再创建一个for循环吗?
 
var selected_obj = {
    quantity: testtttttt examplee
}
selected_items.push(selected_obj);

Please let me know if you need any further assistance.

英文:

I have an issue where it returns an unidentified when I tried to console the data by clicking get all input type data, All I want is to get the value of each input type and store it on list using push should I make another for loop? just to reiterate each value?

var selected_obj ={ 
            quantity: testtttttt examplee
       }
selected_items.push(selected_obj);

获取循环外的数据在 JQuery 中

what I've tried

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

$(&quot;#allcb&quot;).change(function() {
  $(&#39;tbody tr td input[type=&quot;checkbox&quot;]&#39;).prop(
    &quot;checked&quot;,
    $(this).prop(&quot;checked&quot;)
  );
});

$(document).on(&quot;keyup&quot;, &quot;.quantity_input&quot;, function() {
  var $row = $(this).closest(&#39;.row&#39;);
  var value_input = 0;
  var price_value = 0;
  var total_value = 0;

  value_input = $(&quot;.quantity_input&quot;, $row).val();
  price_value = $(&quot;.price_value&quot;, $row).html();
  total_value = parseInt(value_input) * parseInt(price_value);
  $(&quot;.total_value_row&quot;, $row).text(total_value);
});

$(document).on(&quot;click&quot;, &quot;.remove_data&quot;, function() {
  var $row = $(this).closest(&#39;.row&#39;);
  var checkboxName = $row.data(&#39;for&#39;);
  var $checkbox = $(`input[type=&quot;checkbox&quot;][name=&quot;${checkboxName}&quot;]`);
  
  $row.remove();
  $checkbox.prop(&#39;checked&#39;, false);
  $checkbox.get(0).hasCovered = false;
});

$(document).ready(function() {
  $(&quot;#add_data&quot;).click(function() {
    var grid = document.getElementById(&quot;Table1&quot;);
    var message = &quot;Values                 Description\n&quot;;

    var checkBoxes = grid.getElementsByTagName(&quot;INPUT&quot;);
    var str = &#39;&#39;

    for (var i = 0; i &lt; checkBoxes.length; i++) {
      if (
        checkBoxes[i].checked &amp;&amp;
        checkBoxes[i].name !== &quot;allcb&quot; &amp;&amp;
        !checkBoxes[i].hasCovered
      ) {
        var row = checkBoxes[i].parentNode.parentNode;
        str +=
          &#39;&lt;div class=&quot;row&quot; data-for=&quot;&#39; + checkBoxes[i].id + &#39;&quot;&gt;&lt;div class=&quot;col-md-8&quot;&gt;&lt;p class=&quot;me-3&quot;&gt; &#39; +
          &#39;&lt;a href=&quot;#&quot; class=&quot;text-body&quot;&gt;&#39; +
          &#39;&lt;button type=&quot;button&quot; class = &quot;remove_data&quot; id=&quot;remove_data&quot;&gt;Remove item&lt;/button&gt;&lt;/a&gt;&amp;nbsp&#39; +

          &#39;&lt;span&gt;Quantity&lt;/span&gt;&amp;nbsp&#39; +
          row.cells[2].innerHTML +
          &quot;&lt;/a&gt;&lt;/p&gt; &quot; +
          &#39;&lt;span class=&quot;me-1&quot;&gt;Price &lt;/span&gt;&amp;nbsp&#39; +
          &#39;&lt;span class=&quot;me-1 price_value&quot;&gt;&#39; +
          row.cells[1].innerHTML +
          &quot;&lt;/span&gt;&amp;nbsp&quot; +
          &#39;&lt;input type=&quot;number&quot; id=&quot;quantity_input&quot; class=&quot;form-control form-control-sm w-px-75 quantity_input&quot; value=&quot;1&quot; min=&quot;1&quot; max=&quot;5&quot;/&gt;&amp;nbsp&#39; +
          &#39;&lt;span class= &quot;total_value_row&quot; &gt;total value is&lt;/span&gt; &#39; +
          &quot;&lt;/div&gt;&lt;hr&gt;&lt;/div&gt;&quot;;
        checkBoxes[i].hasCovered = true;
      }
    }
    $(&quot;.whole-div-class&quot;).append(str);
  });


  $(&quot;#get_data&quot;).click(function() {
    var selected_items = [];
    var $row = $(this).closest(&#39;.row&#39;);

    var grid = document.getElementById(&quot;Table1&quot;);
    var checkBoxes = grid.getElementsByTagName(&quot;INPUT&quot;);
    var str = &#39;&#39;

    for (var i = 0; i &lt; checkBoxes.length; i++) {
      value_input = $(&quot;.quantity_input&quot;, $row).val();
      console.log(value_input);
      console.log(&quot;test&quot;);

      var selected_obj ={ 
            quantity: value_input
       }
      selected_items.push(selected_obj);
    }


  });


});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;table border=&quot;1&quot; id=&quot;Table1&quot;&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;allcb&quot; name=&quot;allcb&quot; /&gt;
          &lt;/th&gt;
          &lt;th&gt;Price&lt;/th&gt;
          &lt;td&gt;Quantity&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;cb1&quot; name=&quot;cb1&quot; /&gt;
          &lt;/td&gt;
          &lt;td&gt;200&lt;/td&gt;
          &lt;td&gt; 25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;cb2&quot; name=&quot;cb2&quot; /&gt;
          &lt;/td&gt;
          &lt;td&gt;300&lt;/td&gt;
          &lt;td&gt;30&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;
            &lt;input type=&quot;checkbox&quot; id=&quot;cb3&quot; name=&quot;cb3&quot; /&gt;
          &lt;/td&gt;
          &lt;td&gt;400&lt;/td&gt;
          &lt;td&gt;50&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
    &lt;br /&gt;
    &lt;button type=&quot;button&quot; id=&quot;add_data&quot;&gt;Add datas&lt;/button&gt;
    &lt;button type=&quot;button&quot; id=&quot;get_data&quot;&gt;Get all input type data&lt;/button&gt;
    
    &lt;ul class=&quot;list-group mb-3 row whole-div-class&quot;&gt;&lt;/ul&gt;

<!-- end snippet -->

答案1

得分: 1

你可以通过类选择所有输入元素,然后使用 map 获取对象数组。

const selectedItems = $('.quantity_input').map((i, el) => ({quantity: el.value})).get();
英文:

You can select all the input elements by class, then use map to get an array of objects.

const selectedItems = $(&#39;.quantity_input&#39;).map((i, el) =&gt; ({quantity: el.value})).get();

huangapple
  • 本文由 发表于 2023年5月15日 00:40:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/76248610.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定