追加到数据选择器的值，然后从中删除

Append to value of data selector and then remove from it

本文关键字：然后 删除 数据 选择器 追加      更新时间：2023-09-26

我想从给定类中获取所有名为"data-step"的数据选择器，附加到它们的值，然后将它们恢复到它们的原始值。所以基本上，我想改变这一点：

<div class="MyClass" data-step="1"></div>
<div class="MyClass" data-step="2"></div>

对此：

<div class="MyClass" data-step="1 disabled"></div>
<div class="MyClass" data-step="2 disabled"></div>

然后回到：

<div class="MyClass" data-step="1"></div>
<div class="MyClass" data-step="2"></div>

到目前为止，我知道我可以像这样获得所有特定的数据选择器：

$( ".MyClass[data-step]" ).attr("data-step", "disabled" );

但这会重写数据步骤，我将丢失原始值。

另外，我正在寻找一种不使用cookie或会话存储的简单解决方案。

有什么建议吗？

未经测试...使用 jquery .each 遍历元素

$( ".MyClass[data-step]" ).each(function() {
    var $this = $(this);
    $this.attr("data-step", $this.attr("data-step") + " disabled" );
});

$( ".MyClass[data-step]" ).each(function() {
    var $this = $(this);
    $this.attr("data-step", $this.attr("data-step").replace(" disabled", "") );
});

另外，我正在寻找一种不使用cookie或会话存储的简单解决方案。

我不知道为什么您甚至会考虑cookie或会话存储来进行这样的更改

您可以将其他数据属性用于禁用状态。喜欢：

<div class="MyClass" data-step="1" data-disabled="false"></div>
<div class="MyClass" data-step="2" data-disabled="true"></div>

将div 更改为输入以使结果可见:) 

<script>
    $(document).ready(function () {

        $('#btnDisable').click(function () {
            $('.MyClass[data-step]').attr('disabled', 'disabled');
        });
        $('#btnEnable').click(function () {
            $('.MyClass[data-step]').removeAttr('disabled');
        });
 });  
</script>
</head>
<body>
    <input type="button" value="disable" id="btnDisable"/>
     <input type="button" value="enable" id="btnEnable"/>
 <input class="MyClass" data-step="1" value="111"/>
 <input class="MyClass" data-step="2" value="111"/>

</body>
</html>
相关文章：