jQuery로 값을 수정 한 후 데이터 속성이 적용되지 않습니다.

Question

목록 항목 (li)으로 체크리스트를 구현하고 싶습니다. 나는 데이터 검사 속성을 사용하여 검사 상태를 유지합니다. 나는 css selector ('true'= black과 'false'= white color)로 아이콘 색상을 설정했다.

페이지가 표시되면 모든 작업의 ​​기본 데이터 확인 값이 'false'이므로 모든 작업에 흰색 아이콘이 표시됩니다. 그러나 목록 항목을 클릭하면 데이터 확인 값이 'false'로 수정되지만 색상은 검정색으로 변경되지 않습니다.

경고를 통해 값을 확인했습니다. 그들은 적절합니다.

내가 뭘 잘못하고 있니?

감사합니다.

HTML :

<ul> 
    <li data-id='1' data-checked='false' onclick='toggle_task(this);'> 
    <i class='fs fa-check'></i> 
    <span>Task A</span> 
    </li> 
    <li data-id='2' data-checked='false' onclick='toggle_task(this);'> 
    <i class='fs fa-check'></i> 
    <span>Task B</span> 
    </li> 
</ul> 
<button onclick='show_checked();'>Done</button> 

CSS :

ul li[data-checked='true'] i:first-child { 
    color: #000000; 
} 
ul li[data-checked='false'] i:first-child { 
    color: #eeeeee; 
} 

자바 스크립트 : 나는 당신이 당신의 CSS의 일부로 사용하는 HTML data-* attributes (사이에 혼란이되었다 생각

function toggle_task(sender) { 
    if ($(sender).data('checked').toString == 'true') { 
    $(sender).data('checked','false'); 
    } else { 
    $(sender).data('checked','true'); 
    } 
} 
function show_checked() { 
    $(li).each(function() { 
    var text = $(this).data('id').toString() + ': ' + $(this).data('checked').toString(); 
    alert($(this).data('checked')); 
    }); 
} 

Answer 1

selector)와 임의의 JavaScript 객체를 저장하는 jQuery data method DOM의 외부에있는 요소. 혼란은 아마 this-

.DATA (키)에서 유래 반환 개체 설명 :

반환 데이터로 설정 과의 jQuery 컬렉션의 첫 번째 요소에 대한 데이터 저장소라는 이름의 의 값, (이름, 값) 또는 HTML5 data- * 속성을 사용하십시오.

방법은 HTML에서 데이터를 읽을 수 5 거기에 jQuery를 컬렉션에서 해당 키와 값이 없지만, 그것을 설정하지 않을 경우 데이터 - * 속성. 그래서 당신이를 toString 호출을 생략 할 수 있습니다 -

은 무엇 당신이 원하는 것은 ATTR 방법은 문자열이 아닌 객체를 반환 보너스로 this-

function toggle_task(sender) { 
    if ($(sender).attr('data-checked') === 'true') { 
    $(sender).attr('data-checked','false'); 
    } else { 
    $(sender).attr('data-checked','true'); 
    } 
} 

function show_checked() { 
    $('li').each(function() { 
    var text = $(this).attr('id') + ': ' + $(this).attr('data-checked'); 
    alert($(this).attr('data-checked')); //Consider using console.log rather than alert here 
    }); //Fixed your jQuery selector - required quotes for li element - is not a JavaScript variable 
} 

같은 jQuery attr method를 사용합니다.

시각적으로 무엇을하고 싶은지 확실하지 않지만 색상 블록에 체크 표시 여부를 나타내는 요소가 있어야합니다 (이 경우 <i> 요소가 가장 많지 않음). 당신은 또한 당신의 CSS-에게 내가 당신이 원하는 생각 로 일한다 your original code 및 the updated code의

/* These need to be background-color, not color */ 

ul li[data-checked='true'] i:first-child { 
    background-color: #000000; 
} 
ul li[data-checked='false'] i:first-child { 
    background-color: #eeeeee; 
} 

/* Also need to add these styles to actually see the empty elements */ 

.fa-check { 
    display: inline-block; 
    height: 0.5em; 
    width: 0.5em; 
} 

내가 만든 JSFiddles를 업데이트해야 할) 의미 론적으로 적합.

인라인 "onclick"속성이 아닌 jQuery on method을 사용하여 jQuery와 함께 눈에 잘 띄지 않는 이벤트 핸들러를 사용하십시오. 이렇게하면 JavaScript 콘텐츠가 HTML 콘텐츠와 분리되어 유지됩니다 (http://en.wikipedia.org/wiki/Unobtrusive_JavaScript 참조).