Question

使用以下代码从我的html中删除样式和id属性，但我希望他们在访问者移动到另一个元素后返回。我对jQuery很新，不知道如何实现。我真的很感激有人的帮助。

<div class="base" style="background-image: url(img/3.jpg);">
  <div id="overlay"></div>
</div>

<script>
  $('.base').hover(function(){
    $(this).removeAttr('style').children().removeAttr('id');
  }, function(){
    $(this).addBack();
  });
</script>

Answer 1

您对 addBack() 的作用有错误，无论如何，最好的方法可能是使用CSS类。

类似的东西：

  $('.base').hover(function(){
    $(this).addClass('myClass');
  }, function(){
    $(this).removeClass('myClass');
  });

Example

删除ID的代码部分是不可逆转的，所以我会在那里找到另一种行为/解决方案......

Answer 2

这样的事情应该有效：

<div class="base" style="background-image: url(img/3.jpg);">
  <div id="overlay"></div>
</div>

<script>
  $('.base').hover(function(){
    var $this = $(this);
    $this.data('style', $this.attr('style')).removeAttr('style').children().each(function(){
        var $this = $(this);
        $this.data('id', $this.attr('id')).removeAttr('id');
    });
  }, function(){
    var $this = $(this);
    $this.attr('style',$this.data('style')).removeData('style').children().each(function(){
        var $this = $(this);
        $this.attr('id', $this.data('id')).removeData('id');
    });
  });

</script>

基本上我们将属性值存储在jQuery数据数组中。我没有测试它，但它应该工作，我不止一次使用这种方法.. 更新了代码，这是一个有效的jsfiddle example

在悬停方法上添加已删除的属性

2 个答案: