Question

我正在尝试做什么！按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>

的jQuery

$('.movies a').click(function() {
   var value = $(this).text();
   var input = $('input')
   input.val(value);
$('button').show();

});

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

请参阅Fiddle

上的演示

Answer 1

您可以使用.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();
});

以下是演示：http://jsfiddle.net/yp2ee/3/

上面的代码只会选择值为空的输入元素，然后只选择.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();
});

以下是我的更新演示：http://jsfiddle.net/yp2ee/7/

Answer 2

您只是选择名称为tag的元素。它将返回collection个元素。所以我们不需要那样做。对。？所以我们应该做的是我们必须通过使用.filter()函数来过滤所需的元素，方法是为它提供必要的条件[empty]。

好了，现在我们有机会获得多个空文本框，所以在这种情况下我们必须使用.first()来选择该集合中的第一个元素。

尝试，

$('.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();
 });

上述解释对机制的理解最少。好的，现在来点.next()和.prev()。您再次使用tag名称选择这些按钮。实际上，在这种情况下我们需要选择button旁边的input box，反之亦然。所以我们可以用它们来完成我们需要的东西。

DEMO

Answer 3

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

通过添加类和ID

来修改HTML

http://jsfiddle.net/yp2ee/5/

$('.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();
 });

单击将文本值添加到输入的链接

3 个答案:

DEMO