使用 jQuery 交换（切换）具有 data 属性的 CSS 属性答案

【问题标题】：Swap (toggle) a CSS property with data attribute with jQuery使用 jQuery 交换（切换）具有 data 属性的 CSS 属性
【发布时间】：2021-11-16 07:21:44
【问题描述】：

我有一个定义了“背景颜色”的元素，并且在自定义“数据”属性中有另一个颜色值。

点击时我需要做的是交换这两个值（每次点击按钮时切换它们）。

问题：这些值会与我的代码交换一次，然后出现问题，交换不再起作用。

代码如下：

<span class="button" title="Switch background color"></span>

<div class="targeted-element" style="background-color: #dedede;" data-new-color="rgba(14,22,33,1)"></div>

<script>
$( 'span.button' ).on( 'click', function(e) {
    event.preventDefault();
    $( '.targeted-element' ).each(function() {
        var $back_color = $( this ).css( 'background-color' );
        var $new_color = $( this ).data( 'new-color' );
        $( this ).css( 'background-color', $new_color );
        $( this ).attr( 'data-new-color', $back_color );
    });
});
</script>

【问题讨论】：

注意，我也试过 $( this ).data( 'new-color', $back_color );首先（而不是 $( this ).attr( 'data-new-color', $back_color ); ）但是什么也没做。

标签： jquery onclick swap custom-data-attribute value-of-css-property

【解决方案1】：

显然我的代码有效。在我发布问题后，我回去了，刷新并且它起作用了。

我总是清空缓存并硬重新加载，但显然 .js 文件有时甚至不会更新，这导致了我的问题，即使我刷新了我的页面约 20 次。

【讨论】：