如何以通用方式使用数据属性？

Question

下面有这段代码可以在高级自定义字段插件

中为一组给定的"own fields"创建数据属性

if ($use_acf === true) {
    $fields_cpt = get_fields( $id );
    if ( $fields_cpt === false ) {
        $this->errormessage = 'value of custom type fields is not found';
        add_action( 'admin_notices', array( $this,'error_notice' ) ); 
        return;
    }
    $field_name = $fields_cpt['municipality_name'];
    $field_phone = $fields_cpt['municipality_phone'];
    $field_link = $fields_cpt['municipality_link'];

    $html .= '<option data-fname="' . $field_name . '" data-fphone="' . $field_phone.' " data-flink="'. $field_link . '"  value="' . $id . '">' . $title . '</option>';      
}

在 JS 中它看起来像这样...

var selected_row = $(this).find(":selected");
var fname = selected_row.data('fname');           
var fphone = selected_row.data('fphone');
var flink = selected_row.data('flink');

但我想要一种更通用的方法，其中可以有未知数量的字段，并且它们应该被命名为任何...

我该如何实现？我在想json，但是好像data-attribute不支持json格式。在这种情况下，使用 ajax 不是我的选择。

更新澄清

而不是

var selected_row = $(this).find(":selected");
var fname = selected_row.data('fname');           
var fphone = selected_row.data('fphone');
var flink = selected_row.data('flink');

我想在 js 中做这样的事情:

var selected_row = $(this).find(":selected");
var cptvalues = selected_row.data('cptfieldvalues');

并且在 html 中是这样的...

<option data-cptfieldvalues="{municipality_name:actual name, municipality_phone: actual phone, municipality_link: actual link}">name of municipality</option>

Answer 1

您可以使用 javascript 中可用的 dataset 方法获取目标元素上的所有数据属性，它 returns 一个包含所有数据属性的对象：

var list = document.querySelector('h1').dataset;

document.querySelector('#log').innerHTML = '<pre>' + JSON.stringify(list) + '</pre>';

<h1 data-fname="FirstName" data-fphone="F-Phone" data-flink="FLink!!!">Test with three data attributes.</h1>

<div id='log'></div>

所以在你的代码中你可以这样做：

var selected_row = $(this).find(":selected");
var data = selected_row[0].dataset; // it will return you all the data attributes.

Answer 2

现在我花了一些时间，因为我从来没有听说过 dataset 这实际上是 op 想要的。所以 Jai 的回答确实是正确的...

但这是另一种方法。

var e = document.getElementById("xy");
var dataObj = {};

for (var i = 0, attr = e.attributes, n = attr.length; i < n; i++){
    if(attr[i].nodeName.indexOf("-")){
        var attr_split = attr[i].nodeName.split("-");
        if(attr_split[0] == "data"){
            dataObj[attr_split[1]] = attr[i].nodeValue;
        }
    }
}

alert(JSON.stringify(dataObj));

<div id="xy" data-aaa="111" data-bbb="222" data-ccc="333">Div was created by php</div>

如何以通用方式使用数据属性？

How to use data-attributes in a generic way?

jquery

custom-data-attribute

advanced-custom-fields