Javascript 在两个不同的不透明度之间切换

我有字母表中的所有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);
    }
});
});

---

您可以使用click事件处理程序中的

$（this）

为当前单击的元素进行选择

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

---

您可以使用click事件处理程序中的

$（this）

为当前单击的元素进行选择

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

---

下面是一个完整的简单示例：

HTML:

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);
});

//您的容器
var$wrap=$（'p.alphabet'）；
//把所有的信都包起来
$wrap.html（函数（）{
返回$（this）.text（）.replace（//g，$&'）；
});
//附加事件
$wrap.find（'.letter'）。单击（函数（）{
var isHidden=$（this.css（'opacity'）==.5；
美元（此）.fadeTo（300，isHidden？1:5）；
});

---

演示：

下面是一个完整的简单示例：

HTML:

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);
});

//您的容器
var$wrap=$（'p.alphabet'）；
//把所有的信都包起来
$wrap.html（函数（）{
返回$（this）.text（）.replace（//g，$&'）；
});
//附加事件
$wrap.find（'.letter'）。单击（函数（）{
var isHidden=$（this.css（'opacity'）==.5；
美元（此）.fadeTo（300，isHidden？1:5）；
});

---

演示：

不透明度可以通过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');
});

---

下面是一个JSFIDLE示例。它还包括一种将一串字母转换成标记的方法：

不透明度可以通过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');
});

下面是一个JSFIDLE示例。它还包括一种将一串字母转换为标记的方法，该标记可用于：