التبديل بين فئتين في jQuery

Question

أحاول تعديل الأيقونات الخاصة بـ مداخل واجهة مستخدم jQuery.بدلاً من أن يكون هناك علامة زائد للتصغير وعلامة ناقص للتوسيع، أردت تبديلهما.

لقد حققت نجاحًا محدودًا فقط حيث في المرة الأولى التي قمت فيها بالنقر فوق علامة الطرح تتحول إلى علامة زائد، ولكن علامة الزائد لا تتحول أبدًا إلى علامة ناقص.أي مساعدة في هذا موضع تقدير كبير.

إليك نموذج 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:

<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>

لست متأكدًا تمامًا من كيفية تمكنهم من تبديل علامة الجمع والطرح بشكل صحيح.

Answer 1

وربما لأن عند ربط هذه الوظائف لا توجد نتائج $ ( ". المدخل-رأس .ui-رمز-plusthick"). فإنه لا العثور عليه. يمكنك إضافة هذا الربط إلى $ ( ". المدخل-رأس .ui-رمز-minusthick"). انقر (وظيفة () {... بعد إضافة "واجهة المستخدم-رمز-plusthick" الطبقة.

وتحرير: حل بديل يمكن أن يكون:

$(".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();
    });

وفوق ذلك الأول ستكون الوظيفة الأولى والنقرة الثانية ستكون الوظيفة الثانية.

Answer 2

ماذا عن

$(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

Answer 3

ويمكنك محاولة رمز أدناه

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

Answer 4

ولقد كتبت هذه الوظيفة مسج، وليس البرنامج المساعد، للتنقل عبر أي عدد من الطبقات. عملين مثل تبديل. وضعت للتو CSV الخاص بك من classnames في الطبقات البيانات للعنصر. ثم دورة مع $ (محدد) .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);
    }
});

Answer 5

وبدلا من ان يفعل كل ما جافا سكريبت، لماذا لا مجرد تعديل واجهة المستخدم-رمز-plusthick CSS فئة لإظهار صورة ناقص بدلا من الصورة زائد؟