Question

这是我关于stackoverflow的第一个问题。

$("button").click(function(){
  var text = "<ul>";
  var item = $(".inputvalue").val();
  var n = checkvalue(myArray, item);
  if (!n)
  {
    myArray.push(item);
  }
  else
  {
    counter++;
  }
  for (var i = 0; i < myArray.length; i++)
  {
    var valuetostring = "class" + i.toString();
    text += "<li class=" + valuetostring + ">" + myArray[i] + " x " + counter + "</li>";
  }
  $("#counter").text(counter);
  document.getElementById("output").innerHTML = text;
});

https://jsfiddle.net/m3Low41j/2/

当输入新值时，我需要此解决方案为数组添加唯一值。如果输入相同的值，则值后面的数字应增加1。

像这样：

沙发x 1
Pillow x 4
主席x 1
表x 3

我该怎么做？

如果我的代码有点业余，我很抱歉，我现在已经努力工作了两个晚上仍然无法解决问题。

你可以帮帮我吗？感谢。

Answer 1

您可以尝试使用下面的对象，然后访问该对象以进行显示而不是使用数组。请记住，这是一个精简版本，您需要验证输入，确保它的格式适合作为对象键。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

＆＃13;

var inputObj = {}; 

var entries = function(input){
    if(inputObj[input]== undefined){
        inputObj[input] = 1;
       
    }
    else{
        inputObj[input] += 1; 
    }

}

entries("hello"); 
entries("bye"); 
entries("hello");

//Object.keys, gives you an array of all keys in onject
console.log(Object.keys(inputObj))

//Display key property pairs for entire object
Object.keys(inputObj).forEach(function(key) {
    console.log(key, inputObj[key]);
});

//Access indivdual property
console.log("Hello Property = ", inputObj.hello)

＆＃13;

Answer 2

如果你正在使用jQuery，你应该继续使用那个api而不是混合本机和jQuery，你真的应该给你的变量有意义的名字，以便将来你和其他正在查看你的代码的人更容易。 / p>

此代码的主要内容是您可以使用对象文字{}来存储添加的项目及其计数。所有项目都是唯一的，因为您不能拥有对象的重复键。

＆＃13;

// use an object to store your items
const items = {};

const $input = $('.inputvalue')
const $output = $('#output')

// create a ul with your items and their counts
function render(items) {
  const $ul = $('<ul>')
  $.each(items, function(key, value) {
    $ul.append($(`<li>${key} x ${value}</li>`))
  })
  return $ul
}

$(".run1").click(function(e) {
  // get the value from the input field
  const item = $input.val()
  // if there is no item in the input return and do nothing
  if (item === '') {
    // you could show an error message here
    return false
  }
  // if no key for your item exists create it
  if (!items[item]) {
    // initialize to 0
    items[item] = 0
  }
  // increment your count, we can be sure we have an item at this point
  items[item] += 1
  // render your output
  $output.html(
    render(items)
  )
  console.log('items', items)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <input type="text" class="inputvalue">
  <button class="run1">
  RUN 1
</button>
  <p id="output"></p>
  <p id="counter"></p>
</div>

＆＃13;

Answer 3

经过测试和工作！

请查看代码注释，并利用reduce函数获取Array中元素的总和。

＆＃13;

// Global variables
const arr = [];

$('.run1').click(function() {
  let val = $('.inputvalue').val(),
      counterEl = $('#counter'),
      outputEl = $('#output'),
      outputHtml = '', 
      obj = {};
	
  // Sanitize
  val = $.trim(val);
	
  // Do nothing when dealing with empty values
  if (!val) {
    return;
  }
	
  // Add the value to the main array
  arr.push(val);
	
  // Create an object with totals
  obj = arr.reduce(function(accumulated, item){
    if (accumulated[item]) {
      accumulated[item] += 1;
    } else {
      accumulated[item] = 1;
    }
    return accumulated;
  }, {});
  
  // Build the HTML
  $.each(obj, function(key, count) {
    outputHtml += '<li>' + key + ' x ' + count + '</li>';
  });
	
  // Print the HTML and update the counter
  outputEl.html(outputHtml);
  counterEl.text(arr.length);
});

＆＃13;

.box {
    padding: 20px;
    border: 1px solid #ccc;
    display: inline-block;
    float: left;
    margin-bottom: 20px;
}

/* It's always a good practice to set this cursor for buttons */
.run1 {
    cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <input type="text" class="inputvalue">
  <button class="run1">
    RUN 1
  </button>
  <p id="output"></p>
  <p id="counter"></p>
</div>

＆＃13;

如何在Javascript中增加对象内部的唯一值

3 个答案:

经过测试和工作！