jQuery 显示属性特定值 onclick

Question

希望一些天才能有所帮助。我有一个带有自定义属性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() 将“数据属性”字符串转换为对象。更多信息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>