Question

我的网站上有一个Bootstrap模式，它在主页上启动一次，将用户引导到网站的相应部分。具有数据属性的代码可以在我最近发布的previous question中看到。

我刚刚意识到，当我点击链接时，数据属性会按预期传递到模态中，但是如果我关闭模式以单击其他链接，则之前的数据仍然在缓存中并且正在输入到新链接以及新链接值。

为了尝试清除模态值，我查看了其他帖子，但似乎无法使其发挥作用。以下是我的许多非工作努力之一。

import 'jest-preset-angular';
import 'angular';
import 'angular-mocks';

const mock = () => {
    let storage = {};
    return {
        getItem: key => key in storage ? storage[key] : null,
        setItem: (key, value) => storage[key] = value || '',
        removeItem: key => delete storage[key],
        clear: () => storage = {},
    };
};

Object.defineProperty(window, 'localStorage', {value: mock()});
Object.defineProperty(window, 'sessionStorage', {value: mock()});
Object.defineProperty(window, 'getComputedStyle', {
    value: () => ['-webkit-appearance']
});

Answer 1

data和removeData从不编写或删除data-*属性。 data和removeData管理jQuery的数据缓存，该缓存仅来自data-*属性的初始化。

要实际删除data-*属性，请使用attr("name", null)或.attr({name: null, anotherName: null})。

$(".modal").on("hidden.bs.modal", function(){
    $('.modal-content a').attr({
        'data-category': null,
        'data-subcategory': null
    });
});

请注意，要在属性名称中包含-，您需要在属性名称周围使用引号（单引号或双引号都可以）。

另见：jQuery .data() does not work, but .attr() does。如果您没有使用jQuery数据缓存的功能，您可能希望在其他问题中更改代码以使用attr来获取值。如果您不打算继续使用该数据，则无需将数据复制到缓存中。

直播示例：

$("#btn").on("click", function(){
    $('.modal-content a').attr({
        'data-category': null,
        'data-subcategory': null
    });
    $("<p>").text("Now right-click and check again").appendTo(document.body);
});

<p>Right-click the link below and use Inspect Element to look at its attributes, then press <button id="btn" type="button">this button</button></p>
<div class="modal-content">
  <a href="#" data-category="cat" data-subcategory="subcat">this is the link</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

在关闭时从Bootstrap模式清除数据属性值

1 个答案: