Как создать «повторно используемую» функцию в jquery? - PullRequest
Новая
       24

Как создать «повторно используемую» функцию в jquery?

5 голосов
/ 24 ноября 2011

У меня есть немного кода, который прекрасно работает: 

function displayVals() {
    var phonevals = $("#bphonesel").val();
    $('#bphone').val(phonevals);
}

$("select").change(displayVals);
displayVals();

Я хочу иметь возможность повторно использовать его для всех других ящиков выбора, которые есть на моем сайте. Итак, я решил использовать параметры, чтобы сделать это. Однако я до сих пор не смог получить правильный синтаксис. Вот что у меня есть, но это не работает. Любая помощь будет оценена. 

function displayVals(inputfld, boundfld) {
    var nvenval = $(inputfld).val();
    $(boundfld).val(nvenval);
}

$("select").change(displayVals());
displayVals('#bphonesel', '#bphone');

Ответы [ 3 ]

9 голосов
/ 24 ноября 2011 
$.fn.displayVals = function(inputfld, boundfld) {
    this.change(function() {
        var nvenval = $(inputfld).val();
        $(boundfld).val(nvenval);
    }
}

$("select").displayVals();

Ознакомьтесь с документами jQuery по разработке плагинов для получения дополнительной информации.

4 голосов
/ 24 ноября 2011

Вот так, если вы хотите сделать это функцией jQuery: 

$.fn.displayVals = function() {
// Function stuff goes here
});

$('#element').displayVals()

Внутри функции $(this) работает так, как вы ожидаете. Просто определите это за пределами docReady, и все готово. Сказав это, похоже, что вам просто нужно определить селекторы в вызове displayVals () внутри события .change: 

$("select").change(displayVals('#bphonesel','#bphone'));

Кроме этого, мне нужно было бы увидеть остальную часть вашего кода, чтобы понять, что может быть причиной проблемы.

0 голосов
/ 24 ноября 2011

Я мог бы сделать что-то вроде: 

    (function( $ ){
          $.fn.displayVals = function() {

            this.change(function() {
                var val = $(this).val();
                var elemid = $(this).attr("data-elem");
                if (elemid)
                    $("#" + elemid).html(val);
            });

          };
        })( jQuery );

    $(function () {
        $(".display-vals").displayVals();
    });

Затем, на любом элементе select, с которым вы хотите, чтобы это работало, вы можете сделать что-то вроде: * 

<select class="display-vals" data-elem="val-div">
    <option>item 1</option>
    <option>item 2</option>
    <option>item 3</option>
</select>

<div id="val-div"></div>

При этом используется атрибут data- в стиле html5. Это также означает, что вам не нужно настраивать каждый отдельный раскрывающийся список в событии загрузки документа, каждый выбор может указывать свой собственный элемент отображения в html.

...