[jQuery目标此数据属性

Question

我的以下代码正常工作。如this fiddle所示。

    <div id="test-a" class="test">
        <ul>
            <li data-typea="1">Option 1a</li>
            <li data-typea="2">Option 2a</li>
            <li data-typea="3">Option 3a</li>
        </ul>
    </div>

    <div id="test-b" class="test">
        <ul>
            <li data-typeb="1">Option 1b</li>
            <li data-typeb="2">Option 2b</li>
            <li data-typeb="3">Option 3b</li>
        </ul>
    </div>

    <input name="typea" id="typea" type="number" value="0">
    <input name="typeb" id="typeb" type="number" value="0">

    <script>
        $(document).on('click', '#test-a li', function (event) {
            var view_typea = $(this).attr('data-typea');
            $('#typea').val(view_typea);
        });

        $(document).on('click', '#test-b li', function (event) {
            var view_typeb = $(this).attr('data-typeb');
            $('#typeb').val(view_typeb);
        });
    </script>

我的问题是我想在页面上拥有多个测试类，并且不想为每个事件编写单独的click事件。

所以我想要这样的东西。

    <script>
        $(document).on('click', '.test li', function (event) {
            var id =$(this).closest('.test').attr('id') || '';
            id = id.replace(/test-/,'');
            var view_type = $(this).attr("[data*='type']");
            console.log(id);
            console.log(view_type);
            $('#type' + id).val(view_type);
        });
    </script>

但是view_type属性是未定义的，在这里我哪里出错了？

Answer 1

   <script>
        $(document).on('click', '.test li', function (event) {
            var id =$(this).closest('.test').attr('id') || '';
            id = id.replace(/test-/,'');
            var view_type = $(this).data("type" + id);
            console.log(id);
            console.log(view_type);
            $('#type' + id).val(view_type);
        });
    </script>

您在view_type的数据属性选择中错过了
'id'。
Demo：
http://jsfiddle.net/5Zdkv/

Answer 2

将view_type变量修改为以下代码，您可以使用data直接访问data-attr。

var view_type = $(this).data("type" + id);

Answer 3

您不能使用属性包含选择器来获取数据属性，但是您可以像其他答案一样使用ID。

如果ID由于某种原因与data属性不匹配，则可以创建自己的接受正则表达式的方法

$.fn.regData = function(reg) {
    for (key in this.data()) {
        if (key.match(reg)) return this.data(key);
    }
}

并且像这样使用它
var view_type = $(this).regData(/^type/); // string starts with "type"

FIDDLE
这样，您几乎可以匹配任何东西。