Question

我正在尝试构建一个非常简单的VPS控制面板;我有以下代码列出了我在特定服务器上的每个VPS：

（$ active变量是给出VPS当前状态的BOOLEAN）

<ul id="vps">
<li <? if ($active): ?>class="active"<? endif;?> >
<? if ($active): ?>
   <div class="status">running</div>
   <?else:?>
   <div class="status">halted</div>
<? endif; ?>

<div class="sub">
  <div class="activity">
  <? if ($active): ?>
      <a href="#" id="<?=$vpsid?>" class="activevps"><img src="stop.png" /></a>
  <? else: ?>
    <a href="#" id="<?=$vpsid?>" class="desactivevps"><img src="start.png"/></a>
  <? endif; ?>
  </div>
</div>

以下JQuery操作：

<script>
    $('.activevps').click(function(e){ 
        var target = $(this).attr('id');
        $(this).html ('<img src="ajax-loader.gif" />');
        var source = $(this);
        var tt = new Date().getTime();
        $.ajax({
          type: "POST",
          url: '/vpsadmin/stop/' + tt,
          data: 'vps='+target,
          dataType: "html", 
          timeout: (60 * 1000), 
          success: function(data) {
          $('.vps_'+target).html ('<a href="#" id="'+target+'" class="desactivevps"><img src="play.png" /></a>');
        },
          error: function(objAJAXRequest, strError){alert(strError);
    }
    });

和STOP动作的相同代码

<script>
    $('.desactivevps').click(function(e){ 
        var target = $(this).attr('id');
        $(this).html ('<img src="ajax-loader.gif" />');
        var source = $(this);
        var tt = new Date().getTime();
        $.ajax({
          type: "POST",
          url: '/vpsadmin/start/' + tt,
          data: 'vps='+target,
          dataType: "html", 
          timeout: (60 * 1000), 
          success: function(data) {
          $('.vps_'+target).html ('<a href="#" id="'+target+'" class="activevps"><img src="stop.png" /></a>');
        },
          error: function(objAJAXRequest, strError){alert(strError);
    }
    });

我期待在这里做一些动作（但在jquery行动中丢失了。）

点击开始/停止图标;它应该触发ajax帖子并且：
将'li'类更改为“无效”
将'状态'类更改为“暂停”或“正在运行”
将'a'类更改为activevps / desactivevps，并更改相关的img src。

我对Jquery很新;如何使用简单的点击功能完成所有这些？

Answer 1

我把一个样本放在jsFiddle上，我认为可以帮助你。这是link。

基本上，你发布的代码非常接近 - 我只需做一些调整。

HTML标记

<ul id="vps">
<li class="active" >
   <div class="status">running</div>

  <div class="sub">
    <div class="activity">
      <a href="#" id="100" class="activevps"><img src="http://upload.wikimedia.org/wikipedia/commons/5/5a/Icons-mini-action_stop.gif" /></a>
    </div>
  </div>
</li>
</ul>

我在这里做的唯一改变是装饰（将图像URL更改为我可以在jsFiddle上阅读的内容），我还关闭了<li>和<ul>标签。

jQuery代码

$(document).ready(function() {
    $('.activevps').click(function(e){         
        var target = $(this).attr('id');
        var source = $(this);
        var tt = new Date().getTime();
        $.ajax({
          type: "POST",
          url: '/ajax_json_echo/?q=' + tt,
          data: 'vps='+target,
          dataType: "html",
          timeout: (60 * 1000),
          context: $(this),  //set the context so the callback function knows where to do work
                            // the context will be the clicked <a> element
          success: function(data) {
              alert(data);
              //set the parent li to inactive
              var parentListItem = $(this).parents("li"),
                  statusDiv = $(this).parents("li").find("div.status");
              if (parentListItem.hasClass("active")) {
                  parentListItem.removeClass("active").addClass("inactive");
                  statusDiv.text("halted");
                  $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/d/de/Icons-mini-action_go.gif");
              } else {
                  parentListItem.removeClass("inactive").addClass("active");
                  statusDiv.text("running");
                  $(this).find("img").attr("src", "http://upload.wikimedia.org/wikipedia/commons/5/5a/Icons-mini-action_stop.gif");
              }
          },
          error: function(objAJAXRequest, strError){alert(strError);
    }
    });
    });
});

这里有一些变化。 - 我在您$.ajax的{{1}}调用中设置了上下文，因此我们可以使用<a>项来修改内容。我假设你可能有多个<li>元素，所以我们需要确保只修改被点击的元素 - 而不是一次修改所有元素。 :)在链接的jsFiddle脚本中，我有几个<li>项，只有被点击的项才会更新。 - 我没有基于类的单独脚本 - 我根据类当前的类来设置类，假设只有2个状态（运行/暂停）。如果你有更多，逻辑将会改变，但希望这会让你开始。 - 我不重建图像链接 - 我只是根据点击调整<li>属性和其他类。

除了这些变化，应该这样做。如果有问题请告诉我，我会相应地更新我的答案。

我希望这有帮助！

BTW - jsFiddle脚本调用jsFiddle测试ajax服务。它在返回前等待2秒，基本上只是发送回你发送的内容。我这样做只是为了模拟一个ajax调用。这只是我投入的一个垃圾电话。只是想提一下，如果你对此感到疑惑。 THX。

Jquery类属性导航

1 个答案:

HTML标记

jQuery代码