如何使用javascript在单个变量中添加多个值？

Question

How can I get multiple values in a single variable like this:

1, 2, 3, 4, 5

 $('.icon').click(function() { var totalWishlist; $(this).toggleClass('active'); totalWishlist += $(this).attr('data-pid'); console.log(totalWishlist); });

 .active{color:red;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="icon" data-pid="1">icon 1</div> <div class="icon" data-pid="2">icon 2</div> <div class="icon" data-pid="3">icon 3</div> <div class="icon" data-pid="4">icon 4</div>

Why am I getting undefined ?

Answer 1

You're getting undefined1 etc. because you don't declare totalWishlist with a value, so by default it's undefined. To fix that, define it as an empty string outside of the click handler:

var totalWishlist = '';

However , it would make far more sense to use an array and push() to it. This is far easier to modify. If you want to retrieve a string from that array you can use join(', ') , like this:

 var totalWishlist = []; $('.icon').click(function() { totalWishlist.push($(this).data('pid')); console.log(totalWishlist.join(', ')); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="icon" data-pid="1">icon 1</div> <div class="icon" data-pid="2">icon 2</div> <div class="icon" data-pid="3">icon 3</div> <div class="icon" data-pid="4">icon 4</div>

Answer 2

Use an array and move it outside of your function . If you want to add the items only once, use includes to check if the item is already in the array and skip it:

 const totalWishlist = []; $('.icon').click(function() { const pid = $(this).attr('data-pid'); if (!totalWishlist.includes(pid)) { totalWishlist.push(pid); } console.log(...totalWishlist); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="icon" data-pid="1">icon 1</div> <div class="icon" data-pid="2">icon 2</div> <div class="icon" data-pid="3">icon 3</div> <div class="icon" data-pid="4">icon 4</div>

Answer 3

Make the variable an string And define it outside the function. Make it global.

 var totalWishlist=""; $('.icon').click(function() { totalWishlist+=$(this).attr('data-pid')+ " "; console.log(totalWishlist); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="icon" data-pid="1">icon 1</div> <div class="icon" data-pid="2">icon 2</div> <div class="icon" data-pid="3">icon 3</div> <div class="icon" data-pid="4">icon 4</div>

Or make it an array

 var totalWishlist=[]; $('.icon').click(function() { totalWishlist.push($(this).attr('data-pid')); console.log(totalWishlist); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="icon" data-pid="1">icon 1</div> <div class="icon" data-pid="2">icon 2</div> <div class="icon" data-pid="3">icon 3</div> <div class="icon" data-pid="4">icon 4</div>