jQuery 定位此数据属性

Question

我有以下代码按预期工作。 如这个小提琴所示。

    <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>

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

所以我想要这样的东西。

    <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” 。

演示：

http://jsfiddle.net/5Zdkv/

Answer 2

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

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

Answer 3

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

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

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

小提琴

这样你几乎可以匹配任何东西。