0

我编写的一些 jQuery 代码有问题。

似乎Page 2上的输入字段正在被一个按钮删除，该按钮旨在删除Page 1上的输入字段。我该如何解决这个问题？这是我在 jsFiddle 上的代码 - 尝试在第 2 页上添加新的输入字段，然后使用第 1 页上的删除按钮。有趣的是，它似乎无法反过来工作。这是我的代码：

$(document).ready(function () {
    $('#add_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'roomFac' + n).attr('id', 'roomFac' + n);
        $obj.appendTo($('#search_fac'));
    });

    $('#remove_roomFac').click(function () {
        var $objs = $('select[name*=roomFac]');
        if ($objs.size() > 1) {
            $objs.last().remove();
        }
    });

    $('#addFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        var n = $objs.size() + 1;
        var $obj = $objs.first().clone();
        $obj.attr('name', 'request_roomFac' + n).attr('id', 'research_roomFac' + n);
        $obj.appendTo($('#request_fac'));
    });
    $('#removeFac').click(function () {
        var $objs = $('select[name*=request_roomFac]');
        if ($objs.size() > 1) {
            $objs.last().remove();
        }
    });
});
4

3 回答 3

3

当您使用 ('select[name*=roomFac]'); 您选择两个下拉菜单，因为您使用的是包含选择器。尝试使用带有选择器的开头 ('select[name^=roomFac]');

[http://jsfiddle.net/eyecode/psL2s/2/][1]

于 2013-02-14T01:55:14.910 回答
1

您需要在选择器中有更多上下文才能正确定位元素：

$('#remove_roomFac').click(function () {
    var $objs = $('#search_fac select[name*=roomFac]');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

/////////////////////////////////////////////////////

$('#removeFac').click(function () {
    var $objs = $('#request_fac select[name*=request_roomFac]');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

在这里工作小提琴

于 2013-02-14T01:55:49.890 回答
0

您需要每页一个 div 来确定您的选择器相对于单击的元素的范围。$(this) 是单击的按钮， .closest 然后向上查找父页面，然后再向下查找该页面上的选择框：

http://jsfiddle.net/psL2s/11/

$('#remove_roomFac').click(function () {
    var $objs = $(this).closest('.page').find('select[name*=roomFac] option');
    if ($objs.size() > 1) {
        $objs.last().remove();
    }
});

您可以将事件更改为使其适用于两个按钮并将此类放在按钮上： $('.remove_option').click(function () {

这允许您通过向元素添加类来创建行为，而不是在 JS 中硬编码 ID。

于 2013-02-14T02:03:18.840 回答