>source

다음과 같이 단일 변수에서 여러 값을 얻는 방법 :

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>

왜 내가 undefined 를 받고 있어요 ?


  • 답변 # 1

    undefined1 를 받고있다   totalWishlist 를 선언하지 않았기 때문에  값이 있으므로 기본적으로 정의되지 않습니다. 이 문제를 해결하려면 클릭 핸들러의 빈 문자열외부로 정의하십시오 :

    var totalWishlist = '';
    
    

    그러나, 배열과 push() 를 사용하는 것이 훨씬 더 합리적입니다.  그것에. 이것은 수정하기가 훨씬 쉽습니다. 해당 배열에서 문자열을 검색하려면 join(', ') 를 사용할 수 있습니다 , 이렇게 :

    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>
    
    

  • 답변 # 2

    어레이를 사용하여 함수 밖으로 옮기십시오. 항목을 한 번만 추가하려면 includes 를 사용하십시오.  항목이 이미 배열에 있는지 확인하고 건너 뜁니다.

    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>
    
    

  • 답변 # 3

    변수를 문자열로 만들고 함수 외부에서 변수를 정의하십시오. 글로벌화하십시오.

    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>
    
    

    또는 배열로 만드십시오

    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>
    
    

관련 자료

  • 이전 reactjs - 테스트에서 구성 요소를 반응시키기 위해 소품 전달
  • 다음 루프 R에서 콜 이름 사용