【问题标题】:Perform an action when an li is the last in the ul当 li 是英国的最后一个时执行一个动作
【发布时间】:2013-06-23 19:38:47
【问题描述】:

所以有这个http://jsfiddle.net/mDfQT/15/

<ul id="variants" data-size="0">
    <input type="text" id="some_name" class="some_name" placeholder="category name">
</ul>
    <a href="#" class="add_options" data-id="70281696560900">Add more </a>
Number of rows: <span id="count">0</span>

因此,当单击添加更多链接时,小提琴中显示的 javascript 会在文本框中附加一个 li,并在单击删除链接时将其删除。
当我单击删除链接时,我想检查这是否是 ul 中的最后一个 li,如果它是最后一个/唯一的 li,我还想删除带有 id some_name 的输入。
你会怎么做?谢谢。

【问题讨论】:

  • ul 元素只能有 li 元素作为子元素。 input 在那里无效。
  • 并且 ID 在上下文页面上必须是唯一的
  • 您还生成了无效的重复 id 的“prop_name”,您可以通过 api.jquery.com/index 的当前 li 具有的索引的类来检查
  • 对不起,忽略这一点,我很快就在小提琴上写了。即使在外面,它仍然可以正常工作。如果开始删除的 li 是最后一个,则隐藏 some_name
  • 如果列表元素少于三个,或者说只剩下两个,那就是最后一个添加的和从一开始就存在的那个,所以删除最后一个,隐藏原来的.

标签: javascript javascript-events jquery


【解决方案1】:
$('.add_options').on('click', function () {
    if ( $('#variants > li').length < 2 && (! $('#some_name').closest('li').is(':visible') )) {
        $('#some_name').closest('li').show();
    }else{
        var li  = $('<li />',    {'class':'some_id'}),
            inp = $('<input />', {type:'text', id:'prop_name', 'class':'prop_name', placeholder:'Property name'}),
            anc = $('<a />',     {href:'#', 'class':'remover', text: 'Remove'});

        $('#variants').append(li.append(inp, anc));

        anc.on('click', function() {
            if ($('#variants > li').length < 3) $('#some_name').closest('li').hide();
            $(this).closest('.some_id').remove();
        });
    }
});

FIDDLE

【讨论】:

  • 像老板一样,谢谢!我会试试这个。不错的编码风格顺便说一句,我会从中学到很多东西。
  • 这不是也去掉了类别名称输入吗? - @Skyalchemist 你不是说你不能移除这些物体吗?我真的不明白
  • @LightStyle - 不,它只是隐藏了它!这是一个只隐藏元素,根本不删除,计数器工作的一个 -> jsfiddle.net/mDfQT/21
  • 是的,隐藏,但我错了还是应该至少保持类别输入可见?
  • 问题是删除id为some_name的输入,这就是类别输入,所以我假设重点是在删除最后添加的列表元素时也隐藏它?
猜你喜欢
  • 1970-01-01
  • 2012-01-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-10-18
  • 2014-07-21
  • 1970-01-01
相关资源
最近更新 更多