jQuery의 두 클래스 사이를 전환합니다

StackOverflow https://stackoverflow.com/questions/1644545

  •  10-07-2019
  •  | 
  •  

문제

나는 아이콘을 수정하려고합니다 jQuery UI 포틀릿. 최소화 할 플러스와 확장을 마이너스를 갖지 않고 전환하고 싶었습니다.

마이너스를 플러스로 클릭 할 때 처음으로 성공한 성공을 거두었지만 플러스는 마이너스로 뒤집지 않습니다. 이에 대한 도움은 대단히 감사 할 것입니다.

다음은 샘플 HTML입니다.

<script src="scripts/jquery-1.3.2.js" type="text/javascript" ></script>
<script src="scripts/ui/ui.core.js" type="text/javascript"></script>
<script src="scripts/ui/ui.sortable.js" type="text/javascript"></script>

<div class="column">
    <div class="portlet">
        <div class="portlet-header">Links</div>
        <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
    </div>
</div>

jQuery를 위해 내가 생각 해낸 내용은 다음과 같습니다.

<script type="text/javascript">
    $(function() {
        $(".column").sortable({
            connectWith: '.column'
        });

        $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            .prepend('<span class="ui-icon ui-icon-minusthick"></span>')
            .prepend('<span class="ui-icon ui-icon-closethick"></span>')
            .end()
        .find(".portlet-content");

        $(".portlet-header .ui-icon-minusthick").click(function() {
            $(this).removeClass("ui-icon-minusthick");
            $(this).addClass("ui-icon-plusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".portlet-header .ui-icon-plusthick").click(function() {
            $(this).removeClass("ui-icon-plusthick");
            $(this).addClass("ui-icon-minusthick");
            $(this).parents(".portlet:first").find(".portlet-content").toggle();
        });

        $(".portlet-header .ui-icon-closethick").click(function() {
            $(this).parents(".portlet:first").toggle();
        });

        $(".column").disableSelection();
    });
</script>

편집하다: JQuery UI 데모 사이트의 원래 JavaScript는 다음과 같습니다.

<script type="text/javascript">
$(function() {
    $(".column").sortable({
        connectWith: '.column'
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
            .addClass("ui-widget-header ui-corner-all")
            .prepend('<span class="ui-icon ui-icon-plusthick"></span>')
            .end()
        .find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();
});
</script>

나는 그들이 어떻게 플러스와 마이너스를 올바르게 전환 할 수 있었는지 정확히 잘 모르겠습니다.

도움이 되었습니까?

해결책

아마도 그 함수를 묶을 때 $에 대한 결과가 없기 때문일 것입니다 ( ". portlet-header .ui-icon-plusthick"). 그것을 찾지 못합니다. 이 바인딩을 $ ( ". Portlet-Header .ui-i-Icon-Minusthick"에 추가 할 수 있습니다.

편집 : 대체 솔루션은 다음과 같습니다.

$(".portlet-header .ui-icon-minusthick").toggle(function() {
        $(this).removeClass("ui-icon-minusthick");
        $(this).addClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    }, function() {
        $(this).removeClass("ui-icon-plusthick");
        $(this).addClass("ui-icon-minusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

따라서 첫 번째 클릭은 첫 번째 기능이며 두 번째 클릭은 두 번째 기능입니다.

다른 팁

어때

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus").toggleClass("ui-icon-minus");
});

훨씬 더 짧습니다

$(YOUR_ELEMENT).live("EVENT_NAME", function() {
    $(".portlet-header").toggleClass("ui-icon-plus ui-icon-minus");
});

편집하다

jQuery 1.7에서 .live() 메소드는 더 이상 사용되지 않습니다. 사용 .on() 이벤트 처리기를 첨부합니다. 이전 버전의 jQuery 사용자는 사용해야합니다 .delegate() 선호합니다 .live().

jQuery API 참조

아래 코드를 시도 할 수 있습니다

$(this).toggleClass('ui-icon-plusthick ui-icon-minusthick');

나는 플러그인이 아닌이 jQuery 함수를 썼다. 두 가지는 토글처럼 행동합니다. 클래스 이름의 CSV를 요소의 데이터 클래스에 넣으십시오. 그런 다음 $ (selector) .cycleclass ()로 순환합니다.

사용중인 것을 참조하십시오 www.pluginexamples.com/draggable 선택하다 드래그 가능한 축.

(function($){
    $.fn.cycleClass = function(){
        if( !$(this).data("aClasses") ){
            var classes = $(this).attr("data-classes").split(",");
            $(this).data("aClasses", classes);
            $(this).data("classes", classes.join(" "));
            $(this).data("class", classes.length);
        }
        $(this).data("class",($(this).data("class")+1) % $(this).data("aClasses").length);
        $(this).removeClass($(this).data("classes"))
            .addClass( $(this).data("aClasses")[$(this).data("class")] );
        return $(this);
    }
});

모든 JavaScript를 수행하는 대신 ui-icon-plussick CSS 클래스 플러스 이미지 대신 마이너스 이미지를 표시 하는가?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top