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 선택기를 통해 dom 노드 $('.theClassThatsThereNow'):

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

또한 (js 태그가 있기 때문에) 바닐라 js에서 수행하려면 다음을 수행하십시오.

최신 브라우저의 경우 ( 내가 최신이라고 부르는 브라우저를 보려면 이것을 참조하십시오 )

(클래스가있는 하나의 요소 가정 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>

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

---

HTML 조각으로 시작 :

<div class='helpTop ...

javaScript 조각을 사용하십시오.

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

---

jquery에서 클래스를 다른 클래스로 바꾸려면 jqueryUI SwitchClass 옵션을 사용할 수 있습니다.

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

---

당신은 jQuery를 방법을 사용할 수 있습니다 .hasClass(), .addClass()그리고 .removeClass()당신의 요소에 적용되는 클래스를 조작 할 수 있습니다. 다른 클래스를 정의하고 필요에 따라 추가 / 제거하면됩니다.

---

당신은 사용할 수 있습니다 .removeClass및 .addClass. http://api.jquery.com 에서 자세히 알아 보세요.

---

CSS 파일에 클래스를 만듭니다.

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

그런 다음 jQuery에서

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

---

you could have both of them use a "corpo_button" class, or something like that, and then in $(".corpo_button").click(...) just call $(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);
    });
};

EDIT

This is my solution to replace one class with another (the jQuery way). Actually the other answers don't replace one class with another but add one class and remove another which technically is not the same at all.

Here is an example:

Markup before: <br class="el search-replace"><br class="el dont-search-replace">
js: jQuery('.el').remove('search-replace').add('replaced')
Markup after: <br class="el replaced"><br class="el dont-search-replace replaced">

---

With my solution

js: jQuery('.el').replaceClass('search-replace', 'replaced')
Markup after: <br class="el replaced"><br class="el dont-search-replace">

---

Imagine a string replace function in whatever language:

Search: "search-replace"
Replace: "replaced"
Subject: "dont-search-replace"
Result: "dont-search-replace"
Result (wrong but actually what the other solutions produce): "dont-search-replace replaced"

---

PS If it's for sure that the class to add is not present and the class to remove is present for sure the most simple jQuery solution would be:
jQuery('el').toggleClass('is-present-will-be-removed is-not-present-will-be-added')

PPS I'm totally aware that if your selector equals the class to remove the other solutions would work just fine jQuery('.search-replace').removeClass('search-replace').addClass('whatever').
But sometimes you work with more arbitrary collections.

---

You'd need to create a class with CSS -

.greenclass {color:green;}

Then you could add that to elements with

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

and remove it with -

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

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