Question

我想抓住名为＆＃34; data-step＆＃34;的所有数据选择器。从给定的类中，附加到它们的值，然后将它们恢复为原始值。所以基本上，我想改变这个：

<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或会话存储的简单解决方案。

有什么建议吗？

Answer 1

未经测试...使用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或会话存储来做出这样的改变

Answer 2

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

 var someVar;  //someVar is undefined       
 c(someVar); //will return 0

Answer 3

将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>

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

3 个答案: