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

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

$(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/

切换两种不同的不透明度

3 个答案: