我怎样才能让这段代码更好地工作？答案

【问题标题】：How can I make this code work better?我怎样才能让这段代码更好地工作？
【发布时间】：2011-04-08 17:38:12
【问题描述】：

我最近向question 询问了有关使用 jQuery 操作 html 选择框的问题，并得到了这个非常简短和甜蜜的代码作为答案。

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

这现在适用于多个 optgroups/类别，但导致了另一个错误。一个更有问题的，在那个。

当您从一个类别点击到另一个类别时会发生这种情况。查看jsFiddle。

【问题讨论】：

在换行符之后加逗号让我眼睛发痒。
什么是错误？我似乎在 Chrome 和 FF 中都得到了预期的行为。（编辑：nm 我看到了，类别的名称被添加到下拉列表中）
@Shaz，是的，我也遇到了。我已经习惯了。 @goggin13，当您单击一个类别选项（例如，萨博）然后转到另一个（哈雷）并返回萨博时，就会发生错误。
@Shaz +1 我也受不了，所以我帮了大家一个忙，把它清理干净了。
@nolabel - 我也非常讨厌这种风格，但它是一种有效的风格，我认为在 OP 上强制使用你喜欢的风格是一种不好的形式

标签： javascript jquery html algorithm logic

【解决方案1】：

最后一个sn-p的问题是它使用当前类别的名称来定位最后选择的标签来翻转。相反，如何搜索“：”（如果您在其中一个选项中有“：”，这将不起作用），然后替换字符串的那部分。

将第 5 行更改为：

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

第 8 行到：

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

如果这不适合你，请告诉我！

编辑：事后考虑，您可以考虑添加这一行

$('select').change();

同样，在 $(document).ready() 事件中的某处，这样当页面第一次呈现时，默认值会得到你想要的前缀（我认为）。

【讨论】：

这个答案太深刻了，我两次捂脸。我正忙于寻找一种方法来记住最后一个类别，以至于我看不到更容易/更好的解决方案。谢谢你指出来。

【解决方案2】：

我已经重命名了变量，因为使用有意义的名称命名变量和函数确实是一个好习惯，这样你就可以在记忆中处理正在发生的事情。

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

【讨论】：

【解决方案3】：

这是在黑暗中拍摄的。乍一看，您似乎没有保存先前的选择，而是使用了触发 oldbar && old.html( oldbar.replace(cat + ': ', '') ) 中的事件的选择; 行。您需要将先前选择的类别保存在单独的 var 中。

【讨论】：