JQuery, связывать пользовательские функции с элементами DOM

У меня есть два div в моем приложении, и я хочу, чтобы у них были пользовательские функции с одной и той же сигнатурой, но с разными действиями, чтобы я мог хранить "текущий" div в переменной и просто называть что-то вроде:


myCurrentDiv.theFunction(someEventData);

и активируйте соответствующие методы.

Как это сделать с помощью jQuery?

Я попытался сделать что-то вроде:


$("#myFirstDiv").theFunction = function() {
    alert("theFunction on firstDiv");
}
$("#mySecondDiv").theFunction = function() {
    alert("theFunction on secondDiv");
}

Ответ 1

Философия jQuery противоположна тому, что вы хотите: jQuery не расширяет любые существующие типы/объекты с новыми атрибутами или методами; он реализует все внутри себя.

Но если вы хотите сделать это с помощью jQuery, у вас есть несколько разных способов:

Способ JavaScript:

$("#mySecondDiv")[0].theFunction = function(a, b) { /* ... */ }

jQuery.data:

$("#mySecondDiv").data({ theFunction: function(a, b) { /* ... */ } });
$("#mySecondDiv").data("theFunction")(1, 2)

Пользовательское событие:

$("#mySecondDiv").bind('my-event', function(event, a ,b) { /* ... */ });
$("#mySecondDiv").trigger('my-event', [1, 2]);

Ответ 2

Вы можете использовать jQuery.data для хранения данных, связанных с определенным элементом.

Например:

var div = $("#myFirstDiv")[0];
jQuery.data(div, "theFunction", function() {
    alert("theFunction on firstDiv");
});

Ответ 3

Похоже, что вы хотите создать пользовательское событие в jquery...

$('#myFirstDiv').bind('theFunction', function(e) {
  alert('theFunction on firstDiv');
});

$('#mySecondDiv').bind('theFunction', function(e) {
  alert('theFunction on firstDiv');
});

$('#myFirstDiv').trigger('theFunction');

Вот рабочая скрипка, чтобы показать вам пример: http://jsfiddle.net/XkutP/

Ответ 4

Используйте bind и пользовательскую функцию, затем . trigger для вызова функции.

Ответ 5

Построить объект Super-jQuery

Вы также можете использовать $.fn.extend() для одновременного связывания нескольких методов (функций)., и если вы действительно хотите войти в него, вы можете использовать $.fn.extend() для воссоздания элементов jQuery как сильно настраиваемых объектов, которые затем могут использоваться для автоматизации и управления элементами DOM, которые (логически/практически) являются частью одного и того же объекта или инструмента. (PS: Я составил эту фразу "Super-jQuery" - это не настоящий жаргон... ну, может быть, сейчас.)

Тот, над которым я сейчас работаю, является загрузчиком файлов Excel. Я буду воссоздать/скопировать некоторые из них здесь, чтобы дать вам представление:

HTML

<div id="uploader" class="uploader">

            <div class="uploader-item-title uploader-item title">
                <span class="title-item-value title-item value">
                    Excel File Uploader
                </span>                
            </div>
            <div class="uploader-item-subtitle uploader-item subtitle">
                <span class="subtitle-item-value subtitle-item value">
                    Uploads Excel files
                </span>
            </div>

            <div id="formatError" style="width:100%;">
                <div class="error-message">
                    <!-- General-purpose error-message container (registered on server-side) -->
                </div>
            </div>

            <div id="messagebox" class="uploader-item-messagebox uploader-item messagebox hidden" style="width:100%;">
                <span class="messagebox-item-value messagebox-item value">
                    <!-- Enter any messages/alerts here that you would like to display to the user -->
                </span>
            </div>

            <div id="dropzone" dropzone="copy f:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" class="uploader-item-dropzone uploader-item dropzone">
                <span class="dropzone-item-notes dropzone-item notes">
                    Drag and drop your Excel file(s) here to begin the upload process.
                </span>

                <div id="fileSummaryTable" class="dropzone-item-filesummary dropzone-item filesummary hidden">
                    <table class="filesummary-item-table filesummary-item table">
                        <!-- Display excel file information here. -->
                    </table>
                </div>

                <div id="pbar" class="dropzone-item-pbar dropzone-item pbar hidden">
                    <div class="pbar-item-filler pbar-item filler">
                    </div>
                </div>
            </div>
    <div id="fallbackUploader" class="uploader-item-fallbackuploader uploader-item fallbackuploader invisible">
                <!-- some asp code you don't need to see :) -->
            </div>
</div>

Javascript

var oUploader = (function () {

    function oUploader(opts) { // primary object constructor

            var primaryOpts = opts || {}; // Optional arguments
            var superObj_primary = $('#uploader'); // primary super object
            var that = this;

            var superObj_secondary = (function () { 
                function superObj_secondary(secondaryOpts) { // secondary object constructor

                    // =================================================================================
                    // step 10 = get the default options' values
                    // =================================================================================
                    var self = this,
                        o = secondaryOpts || {},
                        title_val = o.title || 'Excel File Uploader',
                        subtitle_val = o.subtitle || 'Uploads Excel files',
                        notes_val = o.notes || 'Drag and drop your Excel file(s) here to begin the upload process.';

                    // =================================================================================
                    // step 20 = create your public properties and children here.
                    // =================================================================================
                    self.dropzone = $('.uploader-item-dropzone');
                    self.dropzone.pbar = $('.dropzone-item-pbar');
                    self.dropzone.fileSummaryTable = $('#fileSummaryTable');
                    self.fallbackUploader = $('#fallbackUploader');
                    self.messagebox = $('.uploader-item-messagebox');


                    // =================================================================================
                    // step 30 = create your private properties and children here.
                    // =================================================================================
                    var progress_ele = self.dropzone.pbar.children('.pbar-item-filler'), // inner-progressbar element
                        fileSummaryTable_table_ele = self.dropzone.fileSummaryTable.children('table.filesummary-item-table'), // inner table for the file summary table
                        title_ele = $('.uploader-item-title'), // title container for the main uploader object
                        title_value_ele = title_ele.children('.title-item-value'), // inner value object for the title
                        subtitle_ele = $('.uploader-item-subtitle'), // subtitle container for the main uploader object
                        subtitle_value_ele = subtitle_ele.children('subtitle-item-value'), // inner value object for the subtitle
                        notes_value_ele = self.dropzone.children('.dropzone-item-notes'), // element containing the notes text
                        messagebox_ele = $('.uploader-item-messagebox'), // element containing the message/alert container
                        messagebox_value_ele = messagebox_ele.children('.messagebox-item-value'); // element containing the message/alert text

                    // =================================================================================
                    // step 30 = create your public get/set functions for private properties
                    // =================================================================================
                    // ------------------------------------------------------------
                    // get/set function for private properties of uploader
                    // ------------------------------------------------------------
                    Object.defineProperties(superObj_primary,
                        {
                            // gets or sets the title of the uploader
                            'title': {  
                                'get': function () { return title_value_ele.text(); },
                                'set': function (val) { title_value_ele.text(val); }
                            },
                            // gets or sets the sub-title of the uploader
                            'subtitle': { 
                                'get': function () { return subtitle_value_ele.text(); },
                                'set': function (val) { subtitle_value_ele.text(val); }
                            },
                            // either (1) gets the msg value, (2) sets the msg and grows 
                            //      in the container, or (3) clears the msg value and 
                            //      shrinks out the container.
                            'msg': {
                                'get': function () { return messagebox_value_ele.text(); },
                                'set': function (val) {
                                    if (val.length) {
                                        messagebox_value_ele.text(val);
                                        messagebox_ele.xGrowIn(null,null,function () { // fadeObj = custom jQuery plugin created elsewhere
                                            messagebox_value_ele.fadeObj('show',100); // fadeObj = custom jQuery plugin created elsewhere
                                        });
                                    } else {
                                        messagebox_value_ele.fadeObj('invisible',100, function () {
                                            messagebox_ele.xShrinkOut(null,function () {
                                                messagebox_value_ele.text('.');
                                            });
                                        });
                                    }
                                }
                            }
                        });


                    // ------------------------------------------------------------
                    // get/set function for progressbar object
                    // ------------------------------------------------------------
                    Object.defineProperties(self.dropzone.pbar,
                        {
                            // gets or sets the width and data-progress attribute of the inner progress bar.
                            'progress': { 
                                'get': function () { return (parseInt(Math.round(progress_ele.attr('aria-valuenow'))) || 0); },
                                'set': function (val) { progress_ele.progressbar({ value: Math.round(val) }); }
                            }
                        });


                    // =================================================================================
                    // step 40 = create your public methods here.
                    // =================================================================================
                    // ------------------------------------------------------------
                    // hide all of the primary uploader elements and show the fallback elements.
                    // ------------------------------------------------------------
                    self.switchToFallback = function () {
                        // hide the primary uploader elements
                        self.dropzone.addClass('hidden');
                        self.dropzone.fileSummaryTable.addClass('hidden');
                        self.dropzone.pbar.addClass('hidden');
                        // show the fallback uploader elements
                        self.fallbackUploader.removeClass('invisible');
                    };

                    // ------------------------------------------------------------
                    // show the primary dropzone and add the necessary event listeners
                    // ------------------------------------------------------------
                    self.enableDropzone = function () {
                        self.dropzone.removeClass('hidden');
                        // init event handlers
                        self.dropzone.addEventListener("dragenter", dragEnter, false);
                        self.dropzone.addEventListener("dragexit", dragExit, false);
                        self.dropzone.addEventListener("dragleave", dragExit, false);
                        self.dropzone.addEventListener("dragover", dragOver, false);
                        self.dropzone.addEventListener("drop", drop, false);

                        // define drag and drop events
                        function dragEnter(evt) {
                            evt.stopPropagation();
                            evt.preventDefault();
                        }
                        function dragExit(evt) {
                            evt.stopPropagation();
                            evt.preventDefault();
                            self.dropzone.removeClass("active-dropzone");
                        }
                        function dragOver(evt) {
                            evt.stopPropagation();
                            evt.preventDefault();
                            self.dropzone.addClass("active-dropzone");
                        };
                        function drop(evt) {
                            evt.stopPropagation();
                            evt.preventDefault();

                            self.dropzone.removeClass("active-dropzone");
                            superObj_primary.msg = ''; // hide any messages.
                            var files = evt.dataTransfer.files;
                            var count = files.length;

                            // Only call the handler if 1 file was dropped.
                            if (count == 1) {
                                handleFiles(files);
                            }
                            else if (count > 1) {
                                // still working on this part :-/
                            }
                        }

                    };

                    // ------------------------------------------------------------
                    // Method to fill the pbar to the max value (i.e., 100%)
                    // ------------------------------------------------------------
                    self.dropzone.pbar.complete = function () {
                        progress_ele.progressbar({ value: 100 });
                    };

                    // ------------------------------------------------------------
                    // Check if FileAPI and XmlHttpRequest.upload are supported.
                    // ------------------------------------------------------------
                    self.hasDndSupport = function () {
                        return (window.File && window.FileReader && window.FileList && window.Blob && new XMLHttpRequest().upload);
                    };
                };

                return superObj_secondary;
            })();

            return $.fn.extend(superObj_primary, new superObj_secondary());


        };

        return oUploader;
    })();

    var uploader = new oUploader(); // now we just init the new object and there we go. You can go to your console and try out the commands.
// **Note: If you are doing this in JsFiddle, you'll have to change the scope of the browser console from "<top frame>" to "result( fiddle.jshell.net/)".

Дополнительная автоматизация

Этот объект работает до тех пор, пока я создаю соответствующие объекты HTML, но обычно, когда я делаю это, я добавлю дополнительный раздел, в котором я создаю все компоненты HTML через javascript во время построения объекта. Цель этого, конечно же, состоит в том, чтобы сделать инструмент более удобным для развертывания.

Ответ 6

Вы также можете попробовать это, это немного уродливо, но оно работает:)

Пользовательский объект:

$.fn.epicModule = function (pMessage) {

    var object = $(this)[0];

    object.__construct = function (pMessage) {
        //TODO
        this.message = pMessage;
    }

    object.callMeDirectly = function () {
        alert(this.message);
    }

    object.__construct(pMessage);
}

Модуль Init:

$(".myHtmlEl").epicModule("Hallo World");

Вызов функции:

$(".myHtmlEl")[0].callMeDirectly();