Question

所以经过一段时间的搜索后，我无法找到一个现有的问题，这个问题似乎是以我可以与我的具体问题相关的方式解决的。如果我已经错过了一个很好的帖子，我提前道歉并随意发布一个链接并称我为假人！

用简单的英语，这里的目标是：我基本上想用jquery生成一些html，但有几个曲折。基本上会有两组内容与其他所有数字交替出现，我将其称为内容-a和内容-b。提示用户输入一个数字，然后用户输入4.提交此值后，将生成标记，如下所示：（1）content-a（2）content-b（3）content-a （4）内容-b中。

所以这里有一些代码，希望能有所帮助。

我知道如何生成html，但到目前为止，我的js绝对是一个弱点，需要大量练习：

$("#targetDIV").html("<h1>Hello World!</h1> <p>This is a big fat test</p>");

标记很简单，在这里发布它似乎毫无意义，因为它很明显，但无论如何我都会这样做：

<div id="targetDIV" style="border: 3px solid purple">
</div>

根据用户选择的价值，所需的输出会是这样的，但让我们坚持下面的例子：

<div id="targetDIV" style="border: 3px solid purple">
  <!-- Content A -->
  <h1>Hello World!</h1> 
  <p>This is a big fat test</p>

  <!-- Content B -->
  <h1>Hello Universe!</h1> 
  <p>This is a super mega big fat test</p>

  <!-- Content A -->
  <h1>Hello World!</h1> 
  <p>This is a big fat test</p>

  <!-- Content B -->
  <h1>Hello Universe!</h1> 
  <p>This is a super mega big fat test</p>
</div>

希望有足够的时间继续或至少指出我正确的方向，感谢您提出的任何智慧！

Answer 1

这是一个完整的，有效的实例，可以完全满足您的需求。

以下代码将从用户输入数字，然后根据用户输入的数字追加交替的内容集：

var num = prompt("Enter a number");
var contenta = "<h1>Hello World!</h1> <p>This is a big fat test</p>";
var contentb = "<h1>Hello Universe!</h1> <p>This is a super mega big fat test</p>";
var targetDiv = $("#targetDIV");

console.log(targetDiv);

for (var i = 0; i < num; i++) {
    if (i % 2 === 0) targetDiv.append(contenta);
    else targetDiv.append(contentb);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="targetDIV" style="border: 3px solid purple">
</div>

Answer 2

您可以将两个html字符串分配给数组的索引。

var str1 = "<h1>Hello World!</h1> <p>This is a big fat test</p>"
var str2 = "<h1>Hello Universe!</h1> <p>This is a super mega big fat test</p>"

var responses = [str1, str2];

然后，您可以使用for循环，该循环将重复用户输入的次数。在循环的每次迭代中，您可以$('#targetDIV').append(responses[i % 2]);

Answer 3

你可以这样做。

$('#number').change(function() {
    var ind = $(this).val()
    $('#target-div').append($('#holder div').get(ind))
});

这会将HTML保留在隐藏的div中，然后通过索引提取所需的内容。不是最好的方式，但有效。

JSFiddle

Answer 4

如果你只是在两个内容集之间交替，你可以简单地将它们存储为JS数组，比如说content，然后动态生成/插入它们。

关键是当用户更新更改计数时清空目标元素，并根据数组大小的模数（即content[i%content.length]）访问数组中的正确元素。此方法允许您以任意方式增加内容数组的大小，脚本将通过遍历列表继续插入元素，并在结束时从头开始重复。

＆＃13;

$(function() {
  var content = [
    '<h1>Hello World!</h1> <p>This is a big fat test</p>',
    '<h1>Hello Universe!</h1><p>This is a super mega big fat test</p>'
  ];

  $('#count').on('change', function() {
    $('#targetDIV').empty();
    var count = parseInt($(this).val());
    for (var i = 0; i < count; i++) {
      $('#targetDIV').append(content[i%content.length]);
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="count" type="number" min="0" step="1" value="0" placeholder="0" />
<div id="targetDIV" style="border: 3px solid purple"></div>

＆＃13;

Answer 5

＆＃13;

$(function() {
    var A = '<!-- Content A --><h1>Hello World!</h1><p>This is a big fat test</p>';

    var B = '<!-- Content B --><h1>Hello Universe!</h1><p>This is a super mega big fat test</p>';
  
    var targetDiv = $('#targetDIV');

    $('#listCount').on('input', function() {
        targetDiv.empty();
        for(var i = 0; i < +this.value; i++) {
            targetDiv.append( i % 2 == 0 ? A : B );
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="listCount" id="listCount"/>
<div id="targetDIV" style="border: 3px solid purple">
</div>

＆＃13;

Answer 6

我不是专家js dev，但为你做了一些简单快捷的事。

link to codepen: http://codepen.io/anon/pen/OVdMow

Answer 7

function generateElments() {
  var num = $("#numOfElements").val();
  var writeA = true;
  var aElement = "<p>I am <strong>A</strong>!</p>";
  var bElement = "<p>I am <strong>B</strong>!</p>";
  for (var i = 0; i < num; i++) {
    $("#elements-container").append(writeA ? aElement : bElement);
    writeA = !writeA;
  };
};

以下是您需要的工作人员！

http://plnkr.co/edit/qI1LtBwDwu7KIKFzUehB?p=preview

根据用户输入使用jquery创建html元素

7 个答案: