Question

此代码触发显示包含多个字段（邮政地址）的表单，以进行内联编辑。我想从触发元素中的数据属性中获取值（street_name等）。下面的代码不会这样做。如果我把一个字符串“百老汇”，它会显示。可以在params中执行此操作（请参阅代码）。

该文档包含一个包含多个字段的表单示例，但这些值是硬编码的。

使用$(this).editable().attr('steet_name')也不适用于value（undefined is not a function）

如何从触发元素的数据属性中获取所需的值？

编辑 - 我正在将这个JS用于几个不同的触发元素，所以我不能只设置var street_name = $("#letterAddress").data('street_name');

$('.editable-address').editable({
        url: '/en/ajax/methods?method=normalize-address',
        mode:'inline',
        // Here $(this).attr() doesn't work
        value : {
            street_name: $(this).attr('data-street')
        },
        // Here, $(this).attr() does work
        params: function(params) {
            params.column = $(this).attr('data-column');
            return params;
        }
    });

编辑添加相关的HTML

<a
            id="letterAddress"
            href="#"
            class="editable-address editable-empty-address"
            data-column="ind_id"
            data-street_name="<?=$addresses[1]->street_name?>"
            data-street_nbr="<?=$addresses[1]->street_nbr?>"
            data-city="<?=$addresses[1]->city?>"
            data-zipcode="<?=$addresses[1]->zipcode?>"
            data-country="<?=$addresses[1]->country?>"
            >
                <?=$address?>
            </a>

编辑：找到了我自己的解决方案。通过将editable()代码包装在click事件周围，我可以将单击元素的数据属性值分配给变量，然后可以在editable()代码中使用这些变量。请注意最后的editable('show')

$('.editable-address').click(function() {

        var street = $(this).attr('data-street_name')

        $(this).editable({
            url: '/ajax/url',
            mode:'inline',
            value:  {
                adr_street_name: street
            },
            params: function(params) {                    
                return params;
            }
        }).editable('show');

    })

Answer 1

如果您尝试访问以下标记的“data-street”属性，请使用data函数：

<a href="#" data-street="some street" data-zip-code="12345">
<script>
    var value = $(this).data('street');
    var zip = $(this).data('zip-code');
</script>

编辑：新标记

var col = $(this).data('column');
var street_name = $(this).data('street_name');
var street_nbr = $(this).data('street_nbr');
var city = $(this).data('city');
var zipcode = $(this).data('zipcode');
var country = $(this).data('country');

Answer 2

这些将被拉入数据属性。

$(".editable-address").each(function(){
    var data = $(this).data();
    console.log(data);
});

返回每个可编辑地址的对象

{column: "ind_id", street_name: "<?=$addresses[1]->street_name?>", street_nbr: "<?=$addresses[1]->street_nbr?>", city: "<?=$addresses[1]->city?>", zipcode: "<?=$addresses[1]->zipcode?>"}

然后，您可以遍历该对象以获得您需要的值。

Answer 3

现在，您可以在data-value属性中使用JSON对象：

<a href="#" data-type="address" data-value="{city: 'Moscow', street: 'Lenina'}">Link</a>

如何在x-editable上下文中访问data-attribute中的值？

3 个答案: