jquery 使用图像打开关闭和单击状态

Question

你好，我正在尝试使用 jquery 进行三态翻转。 我想要一个开启状态关闭状态和点击状态。

我必须复制特定的界面风格，并且不能使用图像。 下面是我使用过的代码。 但是，我似乎无法弄清楚当单击另一个图像时如何停用图像。

这是一个场景。

1) 用户将鼠标悬停在图像上，激活打开状态图像。 2) 用户离开该图像并移至另一图像。 上一个活动图像关闭，当前悬停的图像打开。 3) 用户单击激活单击状态图像的图像，但是，当用户单击另一个图像时，先前单击的图像将返回到关闭状态。

我可以用 Javascript 来做到这一点，但是，我是 Jquery 的新手，并且很难弄清楚这一点。

这是代码：

$(document).ready(function() {
   // Navigation rollovers
   $("#nav a").mouseover(function(){
        imgsrc = $(this).children("img").attr("src");
        matches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!matches) {
           imgsrcON = imgsrc.replace(/.gif$/ig,"_on.gif");
           // strip off extension
           $(this).children("img").attr("src", imgsrcON);
        }
    });
    $("#nav a").mouseout(function(){
        $(this).children("img").attr("src", imgsrc);
    });
    // Navigation clicks
    $("#nav a").click(function(){
        imgsrc = $(this).children("img").attr("src");
        clkmatches = imgsrc.match(/_on/);
        // don't do the rollover if state is already ON
        if (!clkmatches) {
            imgsrcCLK = imgsrc.replace(/.gif$/ig,"_clk.gif");
            // strip off extension
            $(this).attr("src", imgsrcCLK);
        }
    });     
});

Answer 1

这段代码应该可以完成您正在寻找的内容。 虽然我还没有测试它的正确性（因为我现在应该正在工作！），但它至少应该说明一种执行此操作的方法。

var clicked_obj;
$("#nav a").mouseover(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to mouseover image>";
    });
}).mouseout(function() {
    if ( $(this).data("clicked") ) { return; }
    $(this).children("img").each(function() {
        this.src = "<path to original image>";
    });
}).click(function() {
    if ( clicked_obj ) {
        $(clicked_obj).removeData("clicked").mouseout();
    }
    clicked_obj = this;
    $(this).data("clicked", true);
    $(this).children("img").each(function() {
        this.src = "<path to clicked image>";
    });
});

Answer 2

澄清一下，如果单击了图像，即使单击另一张图像，您也希望它保持单击状态吗？

如果是这种情况，我会在单击图像时添加一个类，然后在检查删除状态时，检查该类是否在图像上。

前任。

$('item').click(function(){$(this).addClass('clicked');}
$('other_item').click(function(){
     $('all_items') -- if class != 'clicked' 
         { go ahead and revert it to a normal state, otherwise don't touch it}

希望我的伪代码有意义。