0

您好我正在尝试使用 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);
        }
    });     
});
4

2 回答 2

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>";
    });
});
于 2009-07-27T20:34:00.373 回答
0

澄清一下，如果点击了一张图片，即使点击了另一张图片，您是否希望它保持点击状态？

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

前任。

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

希望我的伪代码有意义。

于 2009-07-27T20:28:22.270 回答