Question

我有两个div

    <div id="one">xyz</div>
    <div id="two">abc</div>
    <input id="reverse" type="button" value="Reverse" />

点击按钮后，div的id需要互换。

    $('#one').attr('id', 'two');
    $('#two').attr('id', 'one');

显然是假的，有人可以帮我解决这个问题吗？

Answer 1

这样的事情应该有效：

$('#reverse').click(function() {
    var $one = $('#one');
    var $two = $('#two');
    $one.attr('id', 'two');
    $two.attr('id', 'one');
});

演示：http://jsfiddle.net/ambiguous/9zNq6/

如果你真的很偏执，那么：

$('#reverse').click(function() {
    var $one = $('#one');
    var $two = $('#two');
    $one.removeAttr('id');
    $two.attr('id', 'one');
    $one.attr('id', 'two');
});

演示：http://jsfiddle.net/ambiguous/uQnpY/

Answer 2

首先缓存选择器，使其保存对元素的引用，然后交换id属性。

var one = $('#one');
$('#two').attr('id', 'one');
one.attr('id', 'two');

jsFiddle

Answer 3

我认为你不应该以那种方式搞乱身份证;如果是定位问题，使用类变量更有意义。您确定不能将addclass / removeclass用于您的目的吗？

出于好奇，将两者的内容切换为足够吗？

如果您想切换内容，那将非常简单：

    function switch_contents(){
            var one_contents = $('#one').html();
            $('#one').html($('two').html());
            $('#two').html(one_contents);
    }

如果您真的对实际切换ID感兴趣，可以使用此处切换ID的示例; Changing an element's ID with jQuery

使用jQuery同时交换Div ID

3 个答案: