Javascript Toggle

Question

Я работаю над переключением изображений, первый щелчок должен скрыть изображение, а второй щелчок должен отображать изображение снова. У меня что-то работает, но проблема в том, что при первом нажатии ничего не делает, и при запуске второго щелчка. Надеюсь, что в моем коде есть что-то не так. Пожалуйста, советы

<img src="img/1.jpg" width="449" height="600" class="one" id="one" style="opacity=1"> 
<img src="img/2.jpg" width="450" height="600" class="two"> 

function toggle(obj) { 
    var el = document.getElementById("one"); 

    if (el.style.opacity != 0) { 
     el.style.opacity = 0; 
    } 
    else { 
     el.style.opacity = 1; 
    } 
} 

one.addEventListener("click", toggle, false); 

Answer 1

style="opacity=1" должен быть style="opacity:1". Правило, как вы его написали, является недопустимым и будет проигнорировано, поэтому первый щелчок на элементе установит непрозрачность на 1 (по умолчанию это так или иначе).

Н.Б., вы могли бы реорганизовать функцию, чтобы выглядеть следующим образом:

function toggle(obj) { 
    var el = document.getElementById("one"); 

    el.style.opacity = +!+el.style.opacity; 
    // or, using bitwise XOR assignment to keep @Raynos happy 
    // el.style.opacity ^= 1; 
} 

Работа демо: http://jsfiddle.net/AndyE/se29y/

Это преобразует текущее значение из строки, например "1" на число, например. 1, затем отменяет «правдоподобие» этого числа, !1 === false, затем снова преобразует результирующее логическое число обратно в число до того, как оно назначено на opacity. Это означает, что каждый клик переключает значение на противоположное.

Конечно, поскольку @casablanca's answer указывает, visibility более подходит (и более широко поддерживается) для скрытия элементов на месте, но скрытый элемент нельзя щелкнуть, чтобы его снова отобразили (спасибо @Shadow Wizard).

Answer 2

Не используйте opacity для отображения/скрытия элементов. Вместо этого используйте visible или hidden.

Answer 3

function toggle(obj) { 
    var el = document.getElementById("one"); 

    el.style.opacity = el.style.opacity^1; 
} 

Поскольку преобразование в целое число дважды в одном выражении глупо.

Answer 4

К сожалению, и неудивительно, что каждый браузер имеет свою собственную реализацию непрозрачности .. так вот кросс-браузер (IE, Chrome, Firefox) версия исходного кода:

function Toggle(element) { 
    var curOpacity; 
    if (typeof element.style.filter != "undefined") { 
     curOpacity = parseInt(element.style.filter.split("=")[1]); 
     if (isNaN(curOpacity)) 
      curOpacity = 100; 
     element.style.filter = "alpha (opacity=" + (100 - curOpacity) + ")"; 
    } 
    else { 
     curOpacity = element.style.opacity || 1; 
     element.style.opacity = +!+curOpacity; 
    } 
} 

Чтобы применить это на всех изображений загрузки страницы:

window.onload = function() { 
    var images = document.getElementsByTagName("img"); 
    for (var i = 0; i < images.length; i++) 
     images[i].onclick = function() { Toggle(this); }; 
} 

Дрессировка дело с милыми кошками: http://jsfiddle.net/2sXVQ/2/ :)