Question

点击第二个时反转css样式的最佳方法是什么？

我想要发生的是当用户再次点击该按钮时，它会将所有内容反转到原始位置。我不确定在没有重新声明所有内容的情况下，最有效的方法是什么。特别是那不仅仅是一个改变状态的课程。

HTML：

<div class="wrapper-available">            
   <a class="available">Available</a>
   <div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div>
</div>

CSS：

.wrapper-available {    
    display: inline-block;
    margin-top: 40px;
    position: relative;
}

.available {
    border-radius: 15px;
    padding: 5px 20px 5px 50px;
    background: #39b54a;    
    color: #FFF;
  display: inline-block;
    font-weight: bold;
}

.available-img {
    left: 0;
    position: absolute;
    top: -12px; 
    transition: all .20s ease-in;
}   

    .available-img img {
        border-radius: 30px;
        border: 2px solid #39b54a;
    }

jQuery：

 $(".available").click(function() {
    $(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away");

    $(".available-img").css({
      "left": 100
    });

    $(".available-img img").css({
      "border" : "2px solid #CCC"
    });
  });

http://codepen.io/aguerrero/pen/ORKjya

Answer 1

最简单的方法是在wrapper-available上切换课程，而不是添加内联样式，并在text()元素内切换.available。试试这个：

$(".available").click(function() {
  $(this).text(function(i, t) {
    return t == 'Available' ? 'Away' : 'Available';
  }).closest('.wrapper-available').toggleClass('away');
});

.wrapper-available {
  display: inline-block;
  margin-top: 40px;
  position: relative;
}
.available {
  border-radius: 15px;
  padding: 5px 20px 5px 50px;
  background: #39b54a;
  color: #FFF;
  display: inline-block;
  font-weight: bold;
}
.wrapper-available.away .available {
  background-color: #CCC;
  padding: 5px 50px 5px 20px;
}
.available-img {
  left: 0;
  position: absolute;
  top: -12px;
  transition: all .20s ease-in;
}
.wrapper-available.away .available-img {
  left: 70px; /* note 70px seems to work better than 100px here */
}
.available-img img {
  border-radius: 30px;
  border: 2px solid #39b54a;
}
.wrapper-available.away .available-img img {
  border: 2px solid #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-available">
  <a class="available">Available</a>
  <div class="available-img">
    <img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40">
  </div>
</div>

Answer 2

我在您的CSS文档中添加了三个类，其中包含您在jQuery代码段中添加的样式。现在，您可以使用 .active 类在三个选择器中指定新样式，而不是通过jQuery更新每个元素的特定样式。

CSS：

.available.active {
  background: #CCC;
  padding: 5px 50px 5px 20px;
}

.available-img.active {
  left: 100px;
}

.available-img.active img {
  border: 2px solid #CCC;
}

现在，jQuery代码段会切换所需元素上的 .active 类。这两个：

<a class="available">Available</a>
<div class="available-img">

$（this）.text（）现在在可用和离开之间切换。

jQuery的：

$('.available').click(function() {
  $(this).toggleClass('active').siblings().toggleClass('active');
  $(this).text(function(i, text) {
    return (text === 'Available') ? 'Away' : 'Available';
  });
});

示例：http://codepen.io/praktikdan/pen/wzVrGM

如何反转jQuery css样式？

2 个答案: