Question

我是javascript和jquery的新手，所以如果有明显的解决方案，请耐心等待。我有两个问题：

我正在创建一个随机的叙述者生成器，您可以在其中选择不同的叙事元素来构成情节。为此，我有几个数组但是为了这个例子，让我们展示两个：

var place = ["haunted woods","abandoned mansion", "river", "hospital"];
var decade = ["20's","30's","40's","50's","60's","70's","80's","90's"];

然后对于每个数组，我有以下内容：

$(".placebutton").click(function() {
$(".tags").text(place[Math.floor(Math.random()*place.length)]);
});

$(".decadebutton").click(function() {
$(".tags").text(decade[Math.floor(Math.random()*decade.length)]);
});

这个工作得很好，除了每次单击其中一个按钮之外，它都会替换之前生成的所有按钮。我希望它会做的是互相添加，显示在彼此旁边，如：

50's |河|废弃的豪宅| 20年代（依此类推......）

我也尝试过使用.append，但它也是一样的。

我不知道如何做的第二件事是使这些元素可删除：将鼠标悬停在其中一个值上时，应出现一个X图标，并且只能删除该值，所有其他元素都会调整到该值（没有留下任何已删除的值的空白）

我非常感谢任何帮助！：）

Answer 1

试试这个：

var place = ["haunted woods","abandoned mansion", "river", "hospital"];
var decade = ["20's","30's","40's","50's","60's","70's","80's","90's"];

function addTag(name) {
  $('<li>' + name + '<a href="#">x</a></li>').appendTo(".tags");
}

$(".placebutton").click(function() {
  addTag(place[Math.floor(Math.random()*place.length)]);
});

$(".decadebutton").click(function() {
  addTag(decade[Math.floor(Math.random()*decade.length)]);
});
$('.tags').on('click', 'a', function() {
  $(this).parent().remove();
});

.tags {
  list-style: none;
}
.tags li, .tags li:after {
  display: inline;
}
.tags li:after {
  content: "|";
}
.tags li:last-child:after {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tags">
</ul>
<button class="placebutton">place</button>
<button class="decadebutton">decade</button>

如何让Math.random（）添加到返回的值而不是替换它们

1 个答案: