>source

Problem:

사용자 데이터가 로컬 JSON 파일에 저장된 추적 전자 앱을 작성 중입니다. 본질적으로 나는 html을 통해 표시 할 카드 (json의 사용자 정보)를로드했습니다. 내 다음 단계는 파이썬 백엔드를 실행하는 것입니다. 문제는 현재 올바른 배열 값을로드 할 수 없다는 것입니다. 마지막 값은 현재 파이썬으로 전달하려고하는 변수에로드 중입니다. 나는 forEach를 사용하고 있기 때문에 계산할 필요가 없거나 그렇게해야합니까?

What I expect to happen:

현재 user.handle 값으로 경고가 나타나기를 원합니다. 지금 일어나는 일은 어떤 카드를 누르 든 관계없이 어레이의 마지막 값만 나타납니다. 각 버튼을 눌러 해당 핸들 값을 트리거하려면 어떻게해야합니까?

onclick="myFunction11()" 를 테스트하고 교체 할 때   onclick=alert('${user.handle}') 와 함께  올바른 핸들 값을 인쇄합니다. 그래서 나는 var city 를 덮어 쓰고 있다고 가정 할 수 있습니다.  매번 마지막 배열을 남겼습니다. myFunction11 를 올바르게하는 방법에 대한 조언  내가 원하는 해당 핸들 값을 당깁니다. 감사합니다

Question:

myFunction11이 배열에서 올바른 핸들 값을 올바르게 가져 오려면 어떻게해야합니까? 아니면 이것을 달성하는 더 좋은 방법이 있습니까?

Code:

 $(document).ready(function() {
   users.forEach(function(user) {
  $('.team').append(`<div class="card">
   <figure>
    <img src="${user.image}" />
     <figcaption>
      <h4>${user.name}</h4>
      <h5>${user.handle}</h5>
     </figcaption>
   </figure>
 <div class="links">
   <a href="#" onclick="myFunction11()"><i class="fa fa-pencil"></i></a>
   <a href="#"><i class="fa fa-truck"></i></a>
   <a href="modal"><i class="fa fa-trash-o"></i></a>
 </div>
 <div class="task">
   <div>
   </div>
 </div>
 <div class="bottom-links">
   <a href="#" onclick="myFunction11()"><i class="fa fa-pencil"></i> EDIT</a>
   <a href="#"><i class="fa fa-truck"></i> TRACK</a>
 </div>
 </div>
   <script>
 function myFunction11() {
   var city = '${user.handle}';
   alert(city);
 }
 </script>
 `);
   });

  • 답변 # 1

    같은 함수의 복제본을 추가하는 것은 실제로 나쁜 습관입니다. 세 명의 사용자가있는 경우 myFunction11 기능을 세 번 정의했습니다. 그리고 실제로 (추측 한대로) 마지막 값 city 만 갖는 함수로 끝납니다. .

    대신 더 좋아야합니다 :

    $(document).ready(function() {
      $('.team').append(`<script>
          function myFunction11(city) {
            alert(city);
          }
        </script>`);
      users.forEach(function(user) {
        $('.team').append(`
           ...
     <a href="#" onclick="myFunction11('${user.handle}')"><i class="fa fa-pencil"></i></a>
          ...`);
    });
    
    

  • 답변 # 2

    루프 외부의 함수를 정의하고 사용자 인덱스를 매개 변수로 전달

            function myFunction11(index) {
                        var city = users[index].handle;
                        alert(city);
             }    
             $(document).ready(function() {
                       users.forEach(function(user,i) {
                        $('.team').append(`<div class="card">
                         <figure>
                          <img src="${user.image}" />
                           <figcaption>
                            <h4>${user.name}</h4>
                            <h5>${user.handle}</h5>
                           </figcaption>
                         </figure>
                       <div class="links">
                         <a href="#" onclick="myFunction11(${i})"><i class="fa fa-pencil"></i></a>
                         <a href="#"><i class="fa fa-truck"></i></a>
                         <a href="modal"><i class="fa fa-trash-o"></i></a>
                       </div>
                       <div class="task">
                         <div>
                         </div>
                       </div>
                       <div class="bottom-links">
                         <a href="#" onclick="myFunction11(${i})"><i class="fa fa-pencil"></i> EDIT</a>
                         <a href="#"><i class="fa fa-truck"></i> TRACK</a>
                       </div>
                       </div>`);
                 });
            });
    
    

관련 자료

  • 이전 python 3.x - 파일에서 키를 삭제하는 방법
  • 다음 angular - 이온 응용 분야의 원형 의존성