javascript - 在两种不同的不透明度之间切换

Question

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

Answer 1

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

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

Answer 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

Answer 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/