jQuery 显示属性特定值 onclick

Question

希望有高手帮忙。我有一个 table 自定义属性 data-attributes 值是这样的：

HTML

<table class="myTable">    
    <tbody>
        <tr>
            <td class="attribute-name"></td>
                <td class="attribute-name">Title 1</td>
                <td class="attribute-name">Title 2</td>
        </tr>
        <tr>
            <td class="attribute-name">10</td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"10","attribute_2":"Friday"}"></td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"10","attribute_2":"Saturday"}"></td>
        </tr>
        <tr>
            <td class="attribute-name">20</td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"20","attribute_2":"Friday"}"></td>
                <td class="attribute-twice" data-attributes="{"attribute_1":"20","attribute_2":"Saturday"}"></td>
        </tr>
    </tbody>
</table>

我需要创建一个在单击 attribute_1 值（10 或 20）和 attribute_2 值（星期五或星期六）时显示的函数

到目前为止我的 JS

$('.attribute-twice').click(function(){
    var MyVal1 = $(this).attr('SELECTOR REQUIRED FOR 10 or 20');
    var MyVal2 = $(this).attr('SELECTOR REQUIRED FOR FRIDAY or SATURDAY');

$('span.visiblevalue1').html( MyVal1 );
$('span.visiblevalue2').html( MyVal2 );

});

不确定我会朝着好的方向前进。非常感谢帮助

Answer 1

使用JSON.parse()将'data-attributes'字符串转换为对象。更多信息请访问 https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
请注意 HTML，您在数据属性中使用了错误的引号。您不能输入 data-attributes="attribute_1:"10""，因为您使用了两次 "。你应该像 data-attributes='attribute_1:"10"' 那样使用 ' 和 ".
是否需要displayVal()功能？我删除它只是为了测试目的。

$('.attribute-twice').click(function(){
    var dataString = $(this).attr('data-attributes');
    var dataJSON = JSON.parse(dataString);
        
    //$('span.visiblevalue1').html( dataJSON.attribute_1 );
    //$('span.visiblevalue2').html( dataJSON.attribute_2 );

    console.log(dataJSON.attribute_1);
    console.log(dataJSON.attribute_2);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<table class="myTable">    
    <tbody>
        <tr>
            <td class="attribute-name"></td>
                <td class="attribute-name">Title 1</td>
                <td class="attribute-name">Title 2</td>
        </tr>
        <tr>
            <td class="attribute-name">10</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"10","attribute_2":"Friday"}'>clickMe</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"10","attribute_2":"Saturday"}'>clickMe</td>
        </tr>
        <tr>
            <td class="attribute-name">20</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"20","attribute_2":"Friday"}'>clickMe</td>
                <td class="attribute-twice" data-attributes='{"attribute_1":"20","attribute_2":"Saturday"}'>clickMe</td>
        </tr>
    </tbody>
</table>

jQuery 显示属性特定值 onclick

jQuery display attribute specific values onclick

javascript

jquery

jquery-selectors