Как я могу заставить этот код работать лучше?

Question

Я недавно задал вопрос об управлении html-полем выбора с помощью jQuery и получил этот действительно короткий и приятный код в качестве ответа.

$("#myselect").change(function (event) {
    var o = $("#myselect option:selected"),
    v=o.text(),
    old = $("#myselect option:contains('name')"),
    oldv = old.html();

    oldv && old.html( oldv.replace('name: ', '') );
    o.text('name: ' + v);
});

У меня есть одна проблема.Этот код не работает с несколькими категориями, и я не могу понять, как это можно сделать.Итак, я внес в него очевидные изменения:

$("select").change(function (event) {
    var foo = $("select option:selected"),
        bar = foo.text(),
        cat = foo.parent().attr("label"),
        old = $("select option:contains('" + cat + "')"),
        oldbar = old.html();

    oldbar && old.html( oldbar.replace(cat + ': ', '') );
    foo.text(cat + ': ' + bar);
});

Теперь это работает для нескольких групп / категорий, но привело к другой ошибке.Более проблемный.

Это происходит при переходе из одной категории в другую.Проверьте это на jsFiddle .

Answer 1

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

$("select").change(function () {
    // We immediately invoke this function we are in which itself returns a function;
    // This lets us keep lastCat private (hidden) from the rest of our script,
    // while still giving us access to it below (where we need it to remember the
    // last category).
    var lastCat;
    return function (event) {
        var selected = $("select option:selected"), 
            selectedText = selected.text(),
            cat = selected.parent().attr("label");
        if (lastCat) { // This won't exist the first time we run this
            oldSelection = $("select option:contains('" + lastCat + ":')");
            oldHTML = oldSelection.html();
            oldHTML && oldSelection.html(oldHTML.replace(lastCat + ': ', ''));
        }
        selected.text(cat + ': ' + selectedText);
        lastCat = cat; // Remember it for next time
    };
}()); // Be sure to invoke our outer function (the "closure") immediately, 
// so it will produce an event function to give to the change handler, 
// which still has access to the variable lastCat inside

Answer 2

Проблема с последним фрагментом кода заключается в том, что он использует имя текущей категории, чтобы найти последний выбранный ярлык для обратного просмотра.Вместо этого, как насчет поиска «:» (это не сработает, если у вас есть «:» в одной из ваших опций), а затем заменив эту часть строки.

измените строку 5 на:

, old = $("select option:contains(':')")

и в строке 8:

oldbar && old.html(oldbar.replace(oldbar.substr(0, oldbar.indexOf(':') + 2),''));

Дайте мне знать, если это не работает для вас!

Редактировать: в качестве запоздалой мысли, вы можете подумать о добавлении этогоline

$('select').change(); 

Кроме того, где-то в событии $ (document) .ready (), чтобы при первом отображении страницы значение по умолчанию получало префикс, как (я думаю), который вы хотите.

Answer 3

Вот выстрел в темноте.На первый взгляд кажется, что вы не сохраняете предыдущее выделение и используете выделение, которое вызвало событие в вашем oldbar && old.html (oldbar.replace (cat + ':', '')); строка.Вам необходимо сохранить категорию предыдущего выбора в отдельном файле.