修改

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

添加到loktar的答案......

我认为你想要的是一个切换其他东西的可见性的图像（比如说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！：）

修改

抱歉，没有意识到你每次都在改变图片......

好的最好的方法是在你的跨度中有两个图像！：）

<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");
});

基于上面的代码，这是一个简单的example。

Answer 3

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


});

Answer 4

有一种更简单的方法

使用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()    
})

如何用jQuery替换它？

4 个答案:

修改