Как заменить это на jQuery?

Question

Я новичок в jQuery и не знаю, какая функция лучше всего подходит для замены этого:

<span id="fcp-vicon" onClick="be_visible()"><img src="'.$path.'img/blueicons/hidden.jpg" alt="Cambiar a Modo Visible"/></span>

С этим:

<span id="fcp-vicon" onClick="be_hidden()"><img src="'.$path.'img/blueicons/visible.jpg" alt="Cambiar a Modo Invisible"/></span>

Идея состоит в том, что изображение работает как переключатель для переключения видимости другого поля.

Большое спасибо.

---

Спасибо, мне нужно изменить сам диапазон, поэтому мне нужно изменить соответствующее изображение и встроенное событие onClick.

Answer 1

Добавить к ответу локтара ...

Я предполагаю, что вам нужно изображение, которое переключает видимость чего-то еще (скажем, div).

Что вам нужно, это HTML:

<span id="fcp-vicon"><img src="'.$path.'img/blueicons/visible.jpg" alt="Cambiar a Modo Invisible"/></span>

и что-то вроде этого jquery:

$(document).ready(function(){
    // catch the click on the icon
    $('#fcp-vicon').click(function(){
        // toggle the visibility of the other element
        $('#id-of-other-element').toggle();
    });
});

С jquery нет необходимости во встроенном javascript! :)

EDIT

Извините, не знал, что вы меняете изображение каждый раз ...

Хорошо, лучший способ сделать это - иметь два изображения в своем диапазоне! :)

<span id="fcp-vicon">
    <img src="'.$path.'img/blueicons/visible.jpg" alt="Cambiar a Modo Invisible"/>
    <img src="'.$path.'img/blueicons/hidden.jpg" alt="Cambiar a Modo Invisible" style="display:none"/>
</span>

И JQuery:

$(document).ready(function(){
    // catch the click on the icon
    $('#fcp-vicon').click(function(){
        // toggle the visibility of the images contained in it
        $(this).find('img').toggle();
        // because the first image is showing and the second hidden
        // when you do this the first image will toggle to hidden
        // and the next one will toggle to visible.
    });
});

Это может помочь: http://jsfiddle.net/tclayson/tPWNN/

Answer 2

Похоже, вы пытаетесь переключаться между двумя разными изображениями, а не просто показывать / скрывать одно изображение, как показывают другие ответы (я основываю это на том факте, что в ваших примерах вы ссылаетесь на два разных изображения. ) Если я правильно понял, вы можете сделать следующее.

Добавьте класс к вашему span и удалите onclick:

<span id="fcp-vicon" class="visible">
    <img src="'.$path.'img/blueicons/hidden.jpg" alt="Cambiar a Modo Visible"/>
</span>

И используйте следующий jQuery:

$("#fcp-vicon").click(function() {
   if($(this).hasClass("visible")) {
       $(this).find("img").attr("src", "yourHiddenImage.jpg");
   }
   else {
       $(this).find("img").attr("src", "yourVisibleImage.jpg");
   }
   $(this).toggleClass("visible");
});

Вот простой пример на основе приведенного выше кода.

Answer 3

Есть более простой способ

Используйте DIV, установите размеры, равные размеру изображения, и используйте фоновое изображение.Используйте имя класса для смены стилей.Демо использует цвет границы, просто замените на background-image.

<div id="fcp-vicon"></div>
<div id="otherField">###</div>

CSS:

#fcp-vicon {
    border:1px solid #FFCC00;
    height:20px;
    width:20px;
    cursor:pointer;
}

#fcp-vicon.active {
   border:1px solid #FF0000;
}

JS:

$('#fcp-vicon').click(function() {
    $(this).toggleClass('active')
    $('#otherField').toggle()    
})

Answer 4

$("#fcp-vicon").click(function(){


});