Переключение между двумя разными непроходимостью

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) внутри обработчика события щелчка.

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

Непрозрачность может быть просто d один с 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/