Question

这似乎很容易，但可能比它看起来更难。我一直很难用这个。

我在这里尝试完成的是使用jQuery单击任何按钮，输入或链接时创建带ID的动态内容。

为了更好地解释，

如果点击.button-2或.input-2或.link-2，则动态创建的内容应为 Content-1 ，而不是 Content-2 （我已经使这部分工作正常）。
然后，如果点击了.button-1或.input-1或.link-1，则会动态创建另一个内容，并且 Content-2 （而不是内容 - 1 ）等......（这部分工作正常）
如果我只定位了3个不同的元素，那么只应创建3个内容而不是更多。除非我添加另一个不同的目标元素等等...（我需要帮助）
目标元素可以（但不是必须）以无序方式单击，并且仍然具有带有序ID的内容。（这也很好）

换句话说，您不必按顺序点击目标元素，以使内容具有有序ID。

Jsfiddle example

此代码是作为主代码

＆＃13;

$(function() {
  var num = 1;

  $("button").on("click", function() {
    $("<div />").attr("id", num).text("Content-" + num)
      .appendTo($(".inner"));
    num++;
  });
});

＆＃13;

.inner {
  margin-top: 50px;
  padding: 50px;
  border: 1px solid #CCC;
}

.inner div {
  background: #d0cfcf;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  color: #333;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <button type="button" class="button-1">btn 1</button>
  <button type="button" class="button-2">btn 2</button>
  <button type="button" class="button-3">btn 3</button>
</div>
<div class="container-2">
  <input type="text" class="input-1" value="click me">
  <input type="text" class="input-2" value="click on me too">
</div>
<div class="container-3">
  <a href="#" class="link-1">Click here</a>
  <a href="#" class="link-1">Click here</a> 
</div>


<div class="inner"></div>

＆＃13;

此问题已更新

Answer 1

计算按钮以回答原始问题：

$(function() {
  var num = 1;
  $("button").on("click", function() {
    if ($(".inner").children().length>=$(".container").children().length) return
    $("<div />").attr("id", num).text("Content-" + num)
      .appendTo($(".inner"));
    num++;
  });
});

.inner {
  margin-top: 50px;
  padding: 50px;
  border: 1px solid #CCC;
}

.inner div {
  background: #d0cfcf;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
  <button type="button">btn 1</button>
  <button type="button">btn 2</button>
  <button type="button">btn 3</button>
</div>

<div class="inner"></div>

Answer 2

这是一个硬编码的简单例子。

div#primary

如何使用不同的按钮，输入或链接创建具有相对ID的动态内容？

2 个答案: