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

Click on links that add text values to inputs

本文关键字：链接 文本 添加 输入 单击      更新时间：2023-09-26

我想做什么！按 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();
});

观看小提琴上的演示

您可以使用

.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/

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

通过添加类和 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();
 });
您只需

选择具有tag名称的元素即可。它将返回collection元素。所以我们不需要那个。右。？所以我们应该做的是我们必须通过使用.filter()函数通过向它提供必要的条件[空]来过滤所需的元素。

好的，现在我们有机会获得多个空文本框，因此在这种情况下，我们必须使用 .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名称选择这些按钮。所以实际上在这种情况下我们需要的是选择input box旁边的button，反之亦然。因此，我们可以利用这两者来完成我们需要的东西。

演示

相关文章：