在两种不同的不透明度之间切换答案

【问题标题】：Toggling between two different Opacities在两种不同的不透明度之间切换
【发布时间】：2013-08-05 04:48:49
【问题描述】：

我拥有字母表中的所有 26 个字母，我想制作它，这样当您单击它时，它会淡化为较低的不透明度，但如果您再次单击它，它将恢复为 1.0 的不透明度。我对如何具体选择被点击的字母一无所知，而且我似乎也不知道如何将其切换为特定的不透明度。

$(document).ready(function() {
$(".alphabetLetter").click(function(event) {
    var x = event.target||event.srcElement;
    if(event.target.style.opacity == 1.0){
        $(x).fadeTo('slow',0.5);
    } else if(event.target.style.opacity == 0.5){
        $(x).fadeTo('slow',1.0);
    }
});
});

【问题讨论】：

标签： javascript toggle fading fadeto

【解决方案1】：

您可以通过在点击事件处理程序中使用$(this) 来选择当前点击的元素。

$(document).ready(function() {
  $(".alphabetLetter").click(function(event) {
      if ($(this).css('opacity') == '1')
        $(this).animate({'opacity':0})
      else
        $(this).animate({'opacity':1})
  });
});

【讨论】：

【解决方案2】：

这是一个完整的简单示例：

HTML：

<p class="alphabet">abcdefghijklmnopqrstuvwxyz</p>

JavaScript：

// Your container
var $wrap = $('p.alphabet');

// Wrap all letters in <span>
$wrap.html(function(){
  return $(this).text().replace(/./g, '<span class="letter">$&</span>');
});

// Attach the event
$wrap.find('.letter').click(function(){
  var isHidden = $(this).css('opacity') == .5;
  $(this).fadeTo(300, isHidden ? 1 : .5);
});

演示：http://jsbin.com/eyajel/1/edit

【讨论】：

【解决方案3】：

不透明度可以通过 css 过渡和常规的旧样式来完成。

CSS

.letter {
    transition: opacity 1s;
    color: red;
    cursor: pointer;
}
.letter.active {
    opacity: 0.2;
}

Javascript

$('body').on('click', '.letter', function(e){
    $(this).toggleClass('active');
});

这里以 JSFiddle 为例。它还包括一种获取一串字母并将它们转换为适用于此的标记的方法：http://jsfiddle.net/PFjnB/1/

【讨论】：