자 바스 크 립 트 에서 let 는 폐쇄 로 인 한 문 제 를 피 합 니 다.

5698 단어 JavaScriptlet폐쇄 하 다
let 폐쇄 방지 에 관 한 문제
대상 을 대상 으로 하 는 사상 을 이용 하여 구매자 정보 삭제 기능 을 완성 하고 모든 정 보 는 다음 과 같다.
성명.
전화.
전화 번호
성.
다음 요 구 를 실현 합 니 다.
어떠한 제3자 라 이브 러 리 도 빌려 쓸 수 없 으 며,원생 코드 를 사용 하여 실현 해 야 한다.
제 시 된 기본 코드 구 조 를 결합 하여 아래 2 곳 의 code here 에서 코드 를 보충 하고 구매자 정보의 삭제 기능 을 완성 하 며 이 페이지 는 핸드폰 에 선명 하 게 표시 되 어야 합 니 다.
js 코드 는 임의로 조정 할 수 있 습 니 다.예 를 들 어 es6 코드 를 사용 하여 완성 할 수 있 습 니 다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!--code here-->
    <title>demo</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .head, li div {
            display: inline-block;
            width: 70px;
            text-align: center;
        }

        li .id, li .sex, .id, .sex {
            width: 15px;
        }

        li .name, .name {
            width: 40px;
        }

        li .tel, .tel {
            width: 90px;
        }

        li .del, .del {
            width: 15px;
        }

        ul {
            list-style: none;
        }

        .user-delete {
            cursor: pointer;
        }

    </style>
</head>

<body>
<div id="J_container">
    <div class="record-head">
        <div class="head id">  </div>
        <div class="head name">  </div>
        <div class="head sex">  </div>
        <div class="head tel">    </div>
        <div class="head province">  </div>
        <div class="head">  </div>
    </div>
    <ul id="J_List">
        <li>
            <div class="id">1</div>
            <div class="name">  </div>
            <div class="sex"> </div>
            <div class="tel">13788888888</div>
            <div class="province">  </div>
            <div class="user-delete">  </div>
        </li>
        <li>
            <div class="id">2</div>
            <div class="name">  </div>
            <div class="sex"> </div>
            <div class="tel">13788887777</div>
            <div class="province">  </div>
            <div class="user-delete">  </div>
        </li>
        <li>
            <div class="id">3</div>
            <div class="name">  </div>
            <div class="sex"> </div>
            <div class="tel">13788889999</div>
            <div class="province">  </div>
            <div class="user-delete">  </div>
        </li>
    </ul>
</div>

<script>
    //       ES6   
    function Contact() {
        this.init();
    }

    // your code here
</script>
</body>
</html>
code1

code 2(남 의 코드)

 Contact.prototype.init = function () {
        console.log("Test");
        var div = document.getElementsByClassName("user-delete");
        var ul = document.querySelector("#J_List");
        var list = ul.querySelectorAll("li");

        for (var i = 0; i < div.length; i++) {
            (function (i) {
                div[i].onclick = function () {
                    list[i].remove();
                    console.log(i);
                }
            })(i);
        }
    }

    new Contact();
그 속

 (function (i) {
                div[i].onclick = function () {
                    list[i].remove();
                    console.log(i);
                }
            })(i);
이 단락 은 즉시 함수 가 의 미 를 이해 하지 못 했다.
내 코드

 Contact.prototype.init = function () {
        let div = document.getElementsByClassName("user-delete");
        let ul = document.querySelector("#J_List");
        let list = ul.querySelectorAll("li");

        for (let i in div) {
            div[i].onclick = function () {
                list[i].remove();
                console.log(i);
            }
        }
    }

    new Contact();
나중에 생각해 보 니 폐쇄 가 가 져 온 문 제 를 피하 기 위해 서 였 다.이 류 설 봉 선생님 께 서 말씀 하 셨 지만 잠시 생각 이 나 지 않 았 다.상세 한 것 은 류 설 봉 의 폐쇄 를 보 았 다.
그러나 제 코드 가 실행 되 는 것 도 문제 가 없 었 습 니 다.그 당시 에는 블록 급 역할 영역 에 대한 설명 이 없 었 지만 지금 은 let 로 이 문 제 를 피 할 수 있 습 니 다.그래서 i 가 let 로 설명 하면 함 수 를 즉시 실행 하지 않 아 도 됩 니 다.또한 코드 를 쓰 는 것 은 var 를 피하 고 let 로 바 꿔 야 합 니 다.또 하 나 는 for(let i=0;condition;++i)이런 문 구 는 가능 한 한 for...in........................................................
자 바스 크 립 트 에서 let 가 폐쇄 를 피 하 는 문제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 에서 let 폐쇄 문제 에 관 한 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
vue 회전 목마 애니메이션 실현
vue 동적 로 컬 그림 불 러 오 는 처리 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage