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

时间:2016-01-25 07:30:16

标签: javascript jquery

我想抓住名为" 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或会话存储的简单解决方案。

有什么建议吗?

3 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:0)

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