jquery与开关和点击状态使用图像

问题描述：

嗨我想做一个三态翻转使用jQuery。我想要一个关闭状态和点击状态。jquery与开关和点击状态使用图像

我不得不复制一个特定的界面风格，而不是在一个选项中使用图像。以下是我用过的代码。但是，我似乎无法弄清楚如何在点击另一个图像时停用图像。

这是一个scenerio。

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

请修复您的代码的格式。 – inkedmn 2009-07-27 20:29:22

谢谢tvanfossen！ – DLH 2009-07-27 20:31:29

答

为了澄清，如果图像已被点击，你想让它留在点击的状态，即使在单击另一个形象？

如果是这样的话，我会在点击图像时添加一个类，然后在您的检查中删除状态，检查该类是否在图像上。

ex。

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

希望我的伪代码有意义。

谢谢，其实我想要做的就是让它像标签控件一样工作。移动图像可以唤起开启状态。离开图像调出关闭状态，并单击图像调用点击状态。但是，如果我点击另一张图片，则会停用点击图片的点击状态，并将新点击的图片激活到点击状态。这是否更有意义？谢谢 – Rob 2009-07-27 20:34:50

答

这段代码应该完成你正在寻找的东西。虽然我没有测试它的正确性（因为我目前应该工作！），但它至少应该说明一种做法。

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

jquery与开关和点击状态使用图像

相关推荐