Question

我编写了一个有效的功能，但这很难看。我很确定有更好的方法来做我想要的事情，它可能变得非常难看，因为我在javascript中不是很好：D

我有一些html元素，可能有一个名为view-in-box或view-in-box-640-480的类。如果该类只是view-in-box，则会出现一个对话框，其中包含一些默认宽度和高度，否则它将显示在类名中指定的宽度和高度。

html元素类可以是：class='note comment ui-button view-in-box-300-200 footer star'。

到目前为止我所做的是选择其中包含view-in-box的所有元素：

$('body').delegate('[class*=view-in-box]','click', function(){

然后我获取整个类属性，然后循环它以检查我是否可以找到view-in-box。这是（简化）代码：

$('body').delegate('[class*=view-in-box]','click', function(){
    ...
    var class_array = $(this).attr('class').split(" ");
    for (var i = 0; i < class_array.length; i++) {
        if (class_array[i].search('view-in-box-') != -1) {
            box_text = class_array[i];
            break;
        }
    }

    if (box_text !== null) {
        box_array = box_text.split('-');
        ....
    }

    ....
    return false;
});

所以我想知道，有没有办法直接在我的函数中找回与view-in-box谓词匹配的内容？例如view-in-box或view-in-box-233-455。或者我真的必须得到完整的类属性并将其拆分。

希望我很清楚，javascript让我困惑！感谢。

Answer 1

您应该使用自定义data-*属性而不是类名来存储此数据。

所以而不是：

<div class="note comment ui-button view-in-box-300-200 footer star"></div>

帮自己一个忙，并使用：

<div class="note comment ui-button view-in-box footer star" data-size="300-200"></div>

然后你可以使用$(el).data('size')来使用jQuery获取值。

Answer 2

是的，有可能：

但是，我建议Mathias解决方法。

Answer 3

正则表达式可用于简化代码;您可以使用正则表达式替换JavaScript字符串函数（split，indexOf，search等）：

/(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;

// (?:^|\s) -- non-capturing group that matches beginning of string or white-space
// (-\S+)?  -- optional capturing group that match hyphen + one or more non-white-space characters
// (?:\s|$) -- non-capturing group that matches end of string or white-space

示例：

var rx = /(?:^|\s)view-in-box(-\S+)?(?:\s|$)/;
rx.exec("view-in-box");                                            // ["view-in-box", undefined]
rx.exec("view-in-box-foobar ");                                    // ["view-in-box-foobar ", "-foobar"]
rx.exec("view-in-box-foo-bar");                                    // ["view-in-box-foo-bar", "-foo-bar"]
rx.exec("note comment ui-button view-in-box-300-200 footer star"); // [" view-in-box-300-200 ", "-300-200"]
rx.exec("view-in-boxXXXX");                                        // null
rx.exec("XXXXview-in-box");                                        // null
rx.exec("XXXX-view-in-box");                                       // null

是否有可能获得与jQuery中的部分选择器匹配的值？

3 个答案: