내 함수 내에서 Jquery 콘텐츠 대체가 작동하지 않습니다.

Question

사용자가 체크 박스를 클릭하면 녹색으로 바뀝니다 (Checkbox-active 클래스). 그러나 클릭 한 요소의 텍스트/콘텐츠를 "활성화 됨"으로 변경 한 다음 다시 클릭하거나 형제가되면 다시 원래 텍스트로 되돌리기를 원합니다.

 $(this).siblings().text(text.replace('active')); 

위 코드가 실패한 것 같습니다. 왜?

내 HTML 구조

<div class="edit-area-right"> 
    <div class="font-size"> 
     <h3>Font Size</h3> 
     <div class="checkboxes"> <span class="small">S</span> <span class="medium">M</span> <span class="large">XL</span> </div> 
    </div> 

내 사용자 정의 자바 스크립트

$('.font-size .checkboxes span').click(function() { 
    $(this).toggleClass('checkbox-active'); 
    $(this).siblings().removeClass('checkbox-active'); 
    $(this).siblings().text(text.replace('activated')); 
}); 

두 번째 시도 : $(this).siblings.replaceWith("activated");

Answer 1

데이터 속성을 사용하여 각 span 요소의 원본 콘텐츠 사본을 보유합니다. 각 클릭은 해당 특성을 읽고 모든 형제에 대한 범위 내용을 바꿔야합니다. 동일 기간의 두 번째 클릭은 속성으로부터 판독 아래 쇼로 스팬의 내용을 대체한다 :

$('.font-size .checkboxes span').click(function() { 
 
    $(this).toggleClass('checkbox-active'); 
 
    
 
    //Get content of clicked span and remove any spaces around it, if any 
 
    var text = $(this).text().trim(); 
 
    
 
    //If current content (before click) is 'Activated' set to default value 
 
    //Otherwise set content to 'Activated'; default content is in `data-txt` attribute 
 
    //Using the ternary operator -- ?: 
 
    $(this).text(text === 'Activated' ? $(this).data('txt') : 'Activated'); 
 
    
 
    $(this).siblings().removeClass('checkbox-active') 
 
    
 
    //Set content of all siblings to their default (data-txt attribute) values 
 
    .text(function() { 
 
    return $(this).data('txt'); 
 
    }); 
 
});

.checkbox-active { 
 
    color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="edit-area-right"> 
 
    <div class="font-size"> 
 
    <h3>Font Size</h3> 
 
    <div class="checkboxes"> 
 
     <span data-txt="S" class="small">S</span> 
 
     <span data-txt="M" class="medium">M</span> 
 
     <span data-txt="XL" class="large">XL</span> 
 
    </div> 
 
    </div>

출처 :

1. Ternary Operator
2. jQuery.data() | jQuery API Documentation
3. .text() | jQuery API Documentation

Answer 2

이것은 당신이 시작하는 당신의 설명에 따라 해낸 것입니다.

$('.small').data('text', 'S'); 
$('.medium').data('text', 'M'); 
$('.large').data('text', 'XL'); 

$('.font-size .checkboxes span').click(function() { 

    $(this).siblings().removeClass('checkbox-active'); 
    $.each($(this).siblings(), function(i, value) { 
     $(value).text($(value).data('text')); 
    }); 

    if ($(this).hasClass('checkbox-active')) { 
     $(this).text($(this).data('text')); 
    } else { 
     $(this).toggleClass('checkbox-active'); 
     $(this).text('Activated'); 
    } 
}); 

Answer 3

$(document).ready(function() { 
    $('.font-size .checkboxes span').each(function(index, element) { 
     $(this).data('text', $(this).text()); 
    }); 
    }); 

이 코드는 기본적으로 범위의 텍스트를 복사하고 jQuery 객체 내에 저장해야합니다.

$('.font-size .checkboxes span').click(function() { 
    $(this).toggleClass('checkbox-active'); 
    $(this).siblings().removeClass('checkbox-active'); 
    $(this).siblings().each(function(index, element) { 
     $(this).text($(this).data('text')); 
    }); 
    //Edit to revert to original if double click. 
    if($(this).hasClass('checkbox-active')){ 
     $(this).text('Activated'); 
    } else { 
     $(this).text($(this).data('text')); 
    } 
}); 

가이 코드는 꽤 많이 당신이 같은 일이, 유일한 것은()는 데이터를 사용하여 저장된 값을 사용하여 기본 값으로 자신의 형제 텍스트를 재설정한다는 것입니다.

가 여기에 jsfiddle입니다 : http://jsfiddle.net/0xvtrLoz/1/