Question

在下面使用此代码它可以在高级自定义字段 - 插件中为给定的“自己的字段”集创建数据属性

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方法获取目标元素上的所有数据属性，并返回包含所有数据属性的对象：

＆＃13;

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

＆＃13;

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

＆＃13;

因此，在您的代码中，您可以这样做：

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

Answer 2

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

但这是另一种方法。

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: