Question

作为我的第一个jQuery项目，我正在尝试编写一个“停止”状态指示器，循环显示“关闭”，“绿色”，“黄色”和“红色”圆圈图像并发布信息以便我可以记录它在DB中。我目前正在尝试使用toggle()函数，除了我无法将值“初始化”到预先存在的数据库状态之外，它才有效。

这就是我所拥有的：

$('.stoplight').toggle(
    function () {
       $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: 'yellow' });
       $(this).attr('src', '/Images/Stoplights/yellowStatus.gif');
    },
    function () {
       $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: 'red' });
       $(this).attr('src', '/Images/Stoplights/redStatus.gif');
    },
    // ... and so forth for "off" and "green" settings

那么 - 如何在页面加载期间以某种方式设置切换的起始状态，或者，是否有另一种方法可以更好地实现这一点？

Answer 1

这是切换各种灯光的另一种方法。我用div而不是图像，但原理是一样的。在此处查看此操作：http://jsfiddle.net/vy7wX/3/

$('.stoplight').click(function() {
    var lights = ['off','green','yellow','red'];

    // find current status
    var status = $(this).attr('class').replace('stoplight ','');

    // get current position in array
    var position = $.inArray(status, lights);

    // get new position
    var position_new;

    // -1 because array index starts with 0
    if (position == lights.length-1) {
      // if it's at the end, go to the beginning
      position_new = 0;  
    } else {
      // else take the next status in the array
      position_new = position+1;
    }

    // get the new status, based on position
    var status_new = lights[position_new];

    // switch classes
    $(this).toggleClass(status+' '+status_new);
});

在您的情况下，您可以做两件事：检查当前图像src并检索红绿灯名称或向图像添加类，以便您可以直接检索名称。后者可能更容易。

示例：

<img class="stoplight red" src="/Images/Stoplights/redStatus.gif" alt="red light" />

用于更改图像src并发布状态的JS：

$('.stoplight').click(function() {
    var lights = ['off','green','yellow','red'];

    // find current status
    var status = $(this).attr('class').replace('stoplight ','');

    // get current position in array
    var position = $.inArray(status, lights);

    // get new position
    var position_new;

    // -1 because array index starts with 0
    if (position == lights.length-1) {
      // if it's at the end, go to the beginning
      position_new = 0;  
    } else {
      // else take the next status in the array
      position_new = position+1;
    }

    // get the new status, based on position
    var status_new = lights[position_new];

    // update image classnames and src
    $(this)
      .toggleClass(status+' '+status_new);
      .attr('src', '/Images/Stoplights/'+status_new+'Status.gif');

    // update database
    $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: status_new });
});

使用它，灯的起始位置无关紧要，您可以根据数据库中的当前状态简单地将正确的类添加为起始位置。

修改
至于jQuery 1.3.2。 documentation表示在1.3中添加了.toggleClass方法，它可以同时切换多个类。在其他地方，我发现1.3只能处理一个类，所以我假设方法本身是在1.3中添加的，但它在1.4中得到了扩展功能，但未在该页面上记录。

无论如何，这没问题。就像你说的那样，你可以单独切换这两个类。但是，如果您需要使用该方法两次，则可以使用removeClass和addClass，以便脚本更好地阅读。我也忘记了最后一部分的课程更新，所以结尾将是这样的：

// update image classnames and src $(this) .removeClass(status) .addClass(status_new) .attr('src', '/Images/Stoplights/'+status_new+'Status.gif'); // update database $.post('post.aspx', { recordid: <%= this.Id %>, lightid: this.id, value: status_new

此外，为了减少代码行，可以将position_new变量定义为：

// get new position var position_new = position == lights.length-1 ? 0 : position+1;

如何使用jQuery构建“stoplight”状态指示器按钮？

1 个答案: