Javascript 单击向输入添加文本值的链接

我想做的事按1-10的顺序排列你的前10部电影。
单击链接时，应将文本值添加到输入中，并使用一个按钮删除该值。应重复该过程，直到所有输入都有一个值

我可怕的代码
当我单击一个链接时，它会将该值添加到所有输入中。如何单击一个链接将值添加到input1，单击另一个链接将值添加到input2，等等

HTML

<div class="movies">
  <a href="#">Titanic</a>
  <a href="#">Rainman</a>
  <a href="#">Forrest Gump</a>
</div>

<ol>
  <li>
    <input type="text">
    <button class="remove">X</button>
  </li>

  <li>
    <input type="text">
    <button class="remove">X</button>
  </li>

  <li>
    <input type="text">
    <button class="remove">X</button>
  </li>
</ol>

请参见上的演示。您可以使用

.filter（）

选择下一个没有当前值的输入

$('.movies a').click(function() {
    var value = $(this).text();
    var input = $('input').filter(function () {
        return this.value === ''
    }).eq(0);
    input.val(value);
    input.next().show();
});

下面是一个演示：

上面的代码将只选择值为空的输入元素，然后只选择

.filter（）

函数返回的第一个元素。这样，您只需更改单个输入的值，并且只更改第一个空白输入的值

我还更新了按钮的显示/隐藏代码，方法是相对于单击的输入元素或按钮元素显示和隐藏元素：

input.next().show();

更新

您可以使用

.data（）

存储链接的状态，以便只添加一次电影：

$('.movies a').data('clicked', false).click(function() {
    if ($(this).data('clicked') === false) {
        $(this).data('clicked', true);
        ...
    }
});

然后，在“X”按钮单击事件处理程序中，您可以在删除该值之前更改有关该值的数据：

$('button').click(function() {
    var val = $(this).prev().val();
    $('.movies a').filter(function () {
        return $(this).text() === val
    }).data('clicked', false);
    $(this).prev().val("");
    $(this).hide();
});

---

下面是我的更新演示：

您只需选择带有

标记的元素即可。它将返回元素的集合。所以我们不需要这个。正确的。？因此，我们应该做的是，我们必须使用
.filter（）
函数过滤所需的元素，为其提供必要的条件[empty]

现在我们有机会得到多个空文本框，因此在这种情况下，我们必须使用
.first（）
从该集合中选择第一个元素

试试看

上述解释将使人们对该机制有一个起码的了解。好的，现在进入正题
.next（）
和
.prev（）
。再次使用
标记选择这些按钮。因此，在这种情况下，我们实际上需要选择
输入框旁边的
按钮，反之亦然。因此，我们可以利用这两者来完成我们所需要的

另一种方式：不符合标准，但可读

通过添加类和ID稍微修改了HTML


太棒了，贾斯珀。我唯一需要修正的是每次输入只允许一部电影。例如，如果Rain man已被选中，则无法将其放入其他输入中。谢谢，伙计。这正是我想要的。谢谢你！嘿，贾斯珀，我正试图对这个剧本进行最后润色。我缺乏Dom遍历知识，这再次成为一个障碍。我想再添加一些可用性特性。当点击一个链接时，我想改变不透明度，并添加一个span标签，标签上的数字对应于输入。“删除”按钮将删除不透明度并删除跨度标记。我以为我可以让它工作，但遇到了同样的问题，所有的目标被操纵一次。看看我的小提琴。提前感谢您的帮助。@Eric做一些事情，如按标签选择，将为您提供一个很好的起点，但您需要了解事物在思想上是如何联系在一起的。我注意到在新的JSFIDLE中，您试图通过选择DOM中的所有
li
元素来获得
li
元素的标题。这是不必要的，因为选择了正确的
输入
元素下面的几行。这意味着您可以选择该
输入的父项
，以获得正确的
li
<代码>变量输入=。。。；var li=input.parent（）。为了进一步了解您的知识，查找jQuery DOM遍历方法实际上非常容易适应。谢谢Jasper。我主要用Ruby编写服务器端代码。在前端我还有很多东西要学。我看看能不能弄明白。我将研究jquerydom遍历。谢谢那真的很好用。我只需要优先顺序就可以像贾斯珀那样工作。如果一个值被删除，我需要下一个值从顶部开始。希望我说清楚了。非常感谢。
$('button').click(function() {
    var val = $(this).prev().val();
    $('.movies a').filter(function () {
        return $(this).text() === val
    }).data('clicked', false);
    $(this).prev().val("");
    $(this).hide();
});

$('.movies a').click(function() {
    var value = $(this).text();
    var input = $('input')
                .filter(function(){ return $.trim($(this).val()) == ""; })
                .first();
    input.val(value);
    input.next('button').show();
});

$('button').click(function() {
    $(this).prev('input').val("");
    $(this).hide();
 });

$('.movies a').click(function() {
    var value = $(this).text();
    var id = $(this).attr('id');
    $('.'+id).val(value).show();
    $('.'+id).next('button').show();
});

$('button').click(function() {
    $(this).prev('input').val("");
    $(this).hide();
 });