Question

我正在尝试显示一个按钮，以＆＃34;未标记的＆＃34;开头。当用户点击按钮时，我需要它来切换到下一个按钮，＆＃34; form＆＃34;。当这些点击发生时，我希望通过ajax发出一个post请求来更新与按钮ID相关联的数据库中的值。此ID来自数据库，其中按钮旁边显示其他信息。我相信这部分是用onclick = functionname（123456）事件完成的？当用户到达结尾（完成）时，另一次点击只是在没有标记的情况下开始它。

我一直在搜索stackoverflow几个小时，但是找不到任何与我想要做的事情有关的事情，并且对jquery / ajax / javascript非常新的

<button type="button" name="Unmarked" value="0" class="btn btn-default"/>Unmarked</button>
<button type="button" name="Form" value="1" class="btn btn-info"/>Form</button>
<button type="button" name="Frame" value="2" class="btn btn-primary"/>Frame</button>
<button type="button" name="S/NB" value="3" class="btn btn-warning"/>S/NB</button>
<button type="button" name="S/B" value="4" class="btn btn-danger"/>S/B</button>
<button type="button" name="Completed" value="5" class="btn btn-success"/>Completed</button>

我希望有人能够至少指出我正确的方向。

Answer 1

根据您的评论...

我们有一个你要迭代的项目ID数组。

var buttonArray = ["unmarked", "form", "frame", "snb", "sb", "completed"];

我们会跟踪当前可见的项目

var currentItemIndex = 0;

最后，我们将调用该函数来更改每次单击按钮的可见性。

function changeButtonVisibility() {
  var buttonClicked = $("#" + buttonArray[currentItemIndex]);
  var nextItemIndex = 0;

  if(currentItemIndex + 1 > buttonArray.length - 1) {
    nextItemIndex = 0;
  } else {
    nextItemIndex = currentItemIndex + 1;
  }

  var nextButton = $("#" + buttonArray[nextItemIndex]);
  currentItemIndex = nextItemIndex;

  buttonClicked.addClass("hidden");
  nextButton.removeClass("hidden");
}

基本上你拿当前按钮，添加隐藏的类，拿下一个按钮，删除隐藏的类。 if语句确保如果你点击最后一项，你将重新开始使用第一项。

最后，将该功能作为点击事件绑定到您的按钮。

 $("#unmarked").click(function() {
  changeButtonVisibility();
});

$("#form").click(function() {
...

根据您的具体使用情况，您可能会想出一种更优雅的方法来解决这个问题。你也绝对可以消除一些代码行。但是，我希望这个例子能为你提供一个如何解决问题的良好起点或想法。

工作示例：jsbin.com/xeyejesaxe

每次点击时旋转按钮设置和值，重复

1 个答案: