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>

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

所以我想要这样的东西。

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

FIDDLE

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

jQuery以此数据属性为目标

3 个答案: