Question

因此，我发布了site以获得任何人都可以发帖的乐趣，有点像论坛。截至目前，我正在制作一个报告按钮，显然可以报告帖子。我希望在用户单击该按钮后禁用该按钮，以防止在当前会话中添加额外的报告。这是我的代码：

{{#each posts}}
  <p><font color="black" size=5><b>{{title}} - </b></font><br>
  <font size=5 color="gray"><i>by {{author}}</i></font></p>
  <p><font color="black" size="4">{{content}}</font></p><br>
  <a id="hides" onclick="hidefunction();"><font size=4><span class="glyphicon glyphicon-alert" aria-hidden="true"></span></font></a><br>
  <font color="black">_______________________________________________________________________</font>
{{/each}}

我知道代码非常难看，但它确实有效。该代码从我的数据库中提取所有帖子，并在网站上创建包含该信息的帖子。与帖子一起，它创建一个报告按钮（glyphicon）。如您所见，报告按钮id为"hides"，onclick调用此处显示的hidefunction()：

<script>
 function hidefunction(){
  document.getElementById("hides").setAttribute("class", "disabledl");
 };
</script>

因此，正如您所看到的，它将hides的属性设置为隐藏的class，但正如我猜测的那样，这只会隐藏第一个（最近的）帖子上的按钮。即使我点击不同的报告按钮。有没有办法让每个按钮都有一个独特的id？这样我就可以隐藏正确的按钮，而不是只隐藏最近创建的按钮。谢谢！

Answer 1

您遇到的问题（如评论中所述）是ID 必须在网页上是唯一的。如果他们不是，那么 通常是第一个被选中的元素，但仍然可能不正确。

但是，你可以绕过这个而不必改变任何东西（尽管你应该找到一种方法来使所有的ID都是唯一的。）

由于JavaScript的工作方式，您已经引用了使用this关键字在该事件中点击的元素。

<script> function hidefunction(){ this.setAttribute("class", "disabledl"); }; </script>

Answer 2

您可以通过JavaScript添加按钮，以便每个按钮都有自己的ID。

 var btn = document.createElement("BUTTON");        // Create a <button> element
    var t = document.createTextNode("This is the button.");       // Create a text node
    btn.appendChild(t);                                // Append the text to <button>
var a  = Math.Random()*100;
btn.id = "Button" + a; //add unique id.
    document.body.appendChild(btn);

现在，您可能希望将ID存储在数组中以供以后使用。

这可以通过创建一个名为idstore的数组来完成：

var idstore = [];

然后将每次生成的随机数推送到数组：

idstore.push("button"+a);

Answer 3

你需要让你的ID独一无二，它们本质上是独一无二的。如果它们不是唯一的，那么你会遇到这样的问题。至于禁用按钮，您可以采取多种方法。最可靠的方法之一是使用onclick函数在运行其代码主体之前检查的var，以确保它已启用。

  val enabled = false;
  function onClickFunc() {
    if (!enabled) {
      return
    }
    //... do something
  }

除此之外，您可以创建控制启用的var的任何代码，并将css应用于按钮以使其显示为禁用。

Answer 4

实施jQuery。（或者你选择的框架）

然后您可以根据this answer中所述的文本选择元素。代码看起来与此类似：

$("#myid:contains('My Text')")

将它们切换到唯一ID和常见的css类可能要好得多，这将使用框架开辟巨大的力量。

当其他具有相同ID的按钮时，如何禁用按钮？

4 个答案: