jQuery는 한 클래스를 다른 클래스로 대체합니다.

jQuery는 한 클래스를 다른 클래스로 대체합니다.

저는 이 jQuery를 가지고 있고 그 안에서 스타일을 변경하고 있지만 정확한 방법은 다른 스타일을 만들고 jQuery로 수업을 대체하는 것이라고 들었습니다.정확한 방법을 설명해 주시겠습니까?

$('.corpo_buttons_asia').click(function() {           
    $('.info').css('visibility', 'hidden');
    $('.info2').css('visibility', 'visible');
    $(this).css('z-index', '20');
    $(this).css('background-color', 'rgb(23,55,94)');
    $(this).css('color', '#FFF');
    $('.corpo_buttons_global').css('background-color', 'rgb(197,197,197)');
    $('.corpo_buttons_global').css('color', '#383838');         
}); 

$('.corpo_buttons_global').click(function() { 
    $('.info').css('visibility', 'visible');
    $('.info2').css('visibility', 'hidden');
    $(this).css('background-color', 'rgb(23,55,94)');
    $(this).css('color', '#FFF');
    $('.corpo_buttons_asia').css('z-index', '2');
    $('.corpo_buttons_asia').css('background-color', 'rgb(197,197,197)');
    $('.corpo_buttons_asia').css('color', '#383838');
}); 

그래서 항상 .css()를 사용하는 대신 다른 클래스를 생성하고 jQuery로 대체할 수 있습니다.

jQuery를 사용하여 이를 효율적으로 수행하려면 다음과 같이 체인으로 연결할 수 있습니다.

$('.theClassThatsThereNow').addClass('newClassWithYourStyles').removeClass('theClassThatsTherenow');

단순화를 위해 다음과 같이 단계적으로 수행할 수도 있습니다(참고로 jquery 객체를 var에 할당할 필요는 없지만 새 클래스를 추가하기 전에 대상 클래스를 실수로 제거하고 jquery selector를 통해 돔 노드에 직접 액세스하는 경우 더 안전하게 느껴집니다.$('.theClassThatsThereNow')):

var el = $('.theClassThatsThereNow');
el.addClass('newClassWithYourStyles');
el.removeClass('theClassThatsThereNow');

또한 (js 태그가 있으니) 바닐라 js에서 하고 싶으셨다면:

현대 브라우저의 경우(현대 브라우저라고 부르는 브라우저를 보려면 이 항목 참조)

(클래스와 함께 요소 하나를 assuming합니다.theClassThatsThereNow)

var el = document.querySelector('.theClassThatsThereNow');
el.classList.remove('theClassThatsThereNow');
el.classList.add('newClassWithYourStyleRules');

또는 이전 브라우저:

var el = document.getElementsByClassName('theClassThatsThereNow');
el.className = el.className.replace(/\s*theClassThatsThereNow\s*/, ' newClassWithYourStyleRules ');

이 간단한 플러그인을 사용할 수 있습니다.

(function ($) {
    $.fn.replaceClass = function (pFromClass, pToClass) {
        return this.removeClass(pFromClass).addClass(pToClass);
    };
}(jQuery));

용도:

$('.divFoo').replaceClass('colored','blackAndWhite');

이전:

<div class="divFoo colored"></div>

이후:

<div class="divFoo blackAndWhite"></div>

참고: 다양한 공백 구분 클래스를 사용할 수 있습니다.

클래스가 여러 개이고 클래스를 모두 덮어쓰려면 jQuery의 .attr()을 사용하여 다음 클래스를 덮어쓰는 것이 가장 쉽습니다.class특성:

$('#myElement').attr('class', 'new-class1 new-class2 new-class3');

HTML 조각부터 시작:

<div class='helpTop ...

javaScript fragment를 사용합니다.

$(...).toggleClass('helpTop').toggleClass('helpBottom');

jquery를 사용하면 클래스를 다른 클래스로 대체할 수 있습니다.UI SwitchClass 옵션

 $("#YourID").switchClass("old-class-here", "new-class-here"); 

CSS로 클래스를 만들어야 합니다.

.greenclass {color:green;}

그런 다음에 당신은 그것을 다음과 같은 요소에 추가할 수 있습니다.

$('selector').addClass("greenclass");

- 로 제거합니다.

$('selector').removeClass("greenclass");

사용가능.removeClass그리고..addClass. 자세한 내용은 http://api.jquery.com 에서 확인할 수 있습니다.

jQuery 메서드를 사용할 수 있습니다..hasClass(),.addClass(),그리고..removeClass()요소에 적용되는 클래스를 조작합니다.서로 다른 클래스를 정의하고 필요에 따라 클래스를 추가/제거합니다.

CSS 파일에 클래스 만들기:

.active {
  z-index: 20;
  background: rgb(23,55,94)
  color: #fff;
}

그럼 당신의 jQuery에서

$(this).addClass("active");

둘 다 corpo_button 같은 클래스를 사용하게 하고 나서$(".corpo_button").click(...)그냥 전화하세요.$(this).toggleClass("corpo_buttons_asia corpo_buttons_global");

jQuery.fn.replaceClass = function(sSearch, sReplace) {
    return this.each(function() {
        var s = (' ' + this.className + ' ').replace(
            ' ' + sSearch.trim() + ' ',
            ' ' + sReplace.trim() + ' '
        );
        this.className = s.substr(1, s.length - 2);
    });
};

편집

이것이 한 클래스를 다른 클래스(jQuery 방식)로 대체하는 제 솔루션입니다.사실 다른 답들은 한 클래스를 다른 클래스로 대체하는 것이 아니라 한 클래스를 추가하고 기술적으로 전혀 같지 않은 다른 클래스를 제거합니다.

다음은 예입니다.

마크업 전:<br class="el search-replace"><br class="el dont-search-replace">
js:jQuery('.el').remove('search-replace').add('replaced')
다음으로 마크업:<br class="el replaced"><br class="el dont-search-replace replaced">

---

나의 해결책을

js:jQuery('.el').replaceClass('search-replace', 'replaced')
다음으로 마크업:<br class="el replaced"><br class="el dont-search-replace">

---

어떤 언어에서든 문자열 교체 기능을 상상해 보십시오.

검색: "검색 바꾸기"
체: 체"
목: "dont-search-replace"
결과: "검색 바꾸기 금지"
결과(다른 솔루션이 제공하는 결과는 틀리지만 실제로는 제공하는 결과):"dont-검색-바꾸기"

---

PS 추가할 클래스가 없고 제거할 클래스가 있는 경우 가장 간단한 jQuery 솔루션은 다음과 같습니다.
jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')

PPS 선택자가 다른 솔루션을 제거하는 클래스와 같다면 잘 작동할 것이라는 것을 잘 알고 있습니다.jQuery('.search-replace').removeClass('search-replace').addClass('whatever').
하지만 때로는 더 자의적인 수집 작업을 할 때도 있습니다.

나는 swap div를 사용하여 썸네일에 있는 나의 비디오를 메인 비디오로 바꾸거나 그 반대로 바꾸었습니다.

이것이 두 디브 클래스 간의 전환에 도움이 될 것 같습니다.

numberId=0
function swapVideo(){
  numberId++;
 console.log(numberId)
  if(numberId % 2 ==0){
  $('#self-video').attr('class', 'main-video');
    $('#trainer-video').attr('class', 'thumb-video');
  }else{
     $('#self-video').attr('class', 'thumb-video');
         $('#trainer-video').attr('class', 'main-video');
  }
}

numberId%2==0은 이 토글을 만드는 작업을 추적하고 수행하는 데 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/8249785/jquery-replace-one-class-with-another