>source

체크 박스를 체크했을 때만 사용자 데이터를 기록하는 크롬 확장 프로그램을 만들려고합니다 (시각적으로 슬라이더이지만 체크 박스 임). 그러나 사용자가 확인란을 클릭 한 후 확인란의 값을 저장하는 데 문제가 있습니다. 팝업창이 닫힐 때마다 확인란 (또는 슬라이더)이 선택 해제 상태로 돌아갑니다.

배경 값이 true 일 때 popup.html의 확인란에 'checked'속성을 추가하고 (background.js에서) 값이 false 일 때 속성을 제거하려고 시도했습니다 (확인되지 ​​않음).

그런 다음 jquery의 .attr이 더 이상 지원되지 않으며 jquery 3 이상에서 .prop ( 'checked', true)를 사용하는 새로운 방법을 읽었습니다.

//background.js
var switchStatus;
chrome.storage.onChanged.addListener(function(changes, areaName){
    console.log('received');
    chrome.storage.local.get('sS', function(status){
        switchStatus = status.sS;
        console.log(switchStatus);
        if(switchStatus === true) {
            $('#togBtn').prop('checked', true);
            chrome.storage.local.set({'sS': true});            
            console.log('when checked ' + switchStatus);
        }
        if(switchStatus === false) {
            $('#togBtn').prop('checked', false);
            chrome.storage.local.set({'sS': false});
            console.log('unchecked ' + switchStatus);
         }
    });
});

//popup.js
$(function() { 
    var switchStatus;
    $("#togBtn").on('change', function() {
         chrome.storage.local.get('sS', function(status){
             switchStatus = status.sS;
         });
        if(($('#togBtn').is(':checked')) === true) {
            switchStatus = $("#togBtn").is(':checked');
            alert(switchStatus); //to verify
            chrome.storage.local.set({'sS': true}, function(){
                alert('saved' + ' : ' + switchStatus);
            });
        }
        if(($('#togBtn').is(':checked')) === false) {
            switchStatus = $("#togBtn").is(':checked');
            alert(switchStatus); //to verify
            chrome.storage.local.set({'sS': false}, function(){
                alert('saved' + ' : ' + switchStatus);
            });
        }   
    });
});

//popup.html
<label class="switch">
            <input type="checkbox" id="togBtn">
            <div class="slider round" id="thisthing">
                <span class="on">ON</span>
                <span class="off">OFF</span>
            </div>
        </label>

다시, 팝업이 닫힌 후 확인란의 값을 저장하려고합니다. 따라서 사용자가 확인란을 클릭하고 슬라이더가 녹색 및 '켜짐'으로 전환되면 팝업 창을 클릭하거나 새 탭으로 이동하면 확인란이 여전히 녹색과 '켜짐'으로 표시됩니다.


  • 답변 # 1

    코드를 약간 단순화 할 수있는 것 같습니다.

    // background.js
    chrome.storage.onChanged.addListener(function(changes, areaName){
        chrome.storage.local.get('sS', function(status){
            var switchStatus = status.sS;
            if(switchStatus) {
                $('#togBtn').prop('checked', true);
            } else {
                $('#togBtn').prop('checked', false);
            }
        });
    });
    
    

    그리고

    // popup.js
    $(function() {
        $("#togBtn").on('change', function(e) {
            if (e.target.checked){
                chrome.storage.local.set({'sS': true}, function(){
                    alert('saved: True');
                });
            } else {
                chrome.storage.local.set({'sS': false}, function(){
                    alert('saved: False');
                });
            }   
        });
        // I think that you may need to include this to initialize the checkbox.
        // I could be wrong though.
        chrome.storage.local.get('sS', function(status){
            var switchStatus = status.sS;
            if(switchStatus) {
                $('#togBtn').prop('checked', true);
            } else {
                $('#togBtn').prop('checked', false);
            }
        });
    });
    
    

  • 이전 rubygems - 실패한 루비 젬 설치 수정
  • 다음 wordpress - 장바구니에 추가하기 전에 장바구니에 추가 버튼을 누르면 자바 스크립트 woocommerce 양식 유효성 검사