我想修改我的 jquery 脚本以添加不同的#id答案

【问题标题】：I would like to amend my jquery script to add a different #id我想修改我的 jquery 脚本以添加不同的#id
【发布时间】：2011-08-10 09:03:54
【问题描述】：

我有这个 jquery 代码，它在点击时将内容向下推送：

<script>
$(document).ready(function() {
  $('#showhide').click(function() {
    if($('#author-dropdown').css('display') == 'none') {
      $('#author-dropdown').slideDown();
    } else {
      $('#author-dropdown').slideUp();
    }
    return false;
  });
});
</script>

我想添加一个不同的 ID。因此，假设当脚本显示==none 时，用户应该看到#author-dropdown，当显示==block 时，id 应该是#author-dropdown-extended。我应该如何修改这个脚本来实现它？

【问题讨论】：

标签： jquery

【解决方案1】：

$('#author-dropdown').attr("id","author-dropdown-extended").slideDown();

并更改以下内容以将其设置回原始状态

$('#author-dropdown-extended').attr("id","author-dropdown").slideUp();

不过我个人会尝试这样的事情......

$('#showhide').click(function() {
    if($('.author-dropdown').is(':hidden')) {
      $('.author-dropdown').slideDown().removeClass('author-dropdown').addClass('author-dropdown-extended');
    } else {
      $('.author-dropdown').slideUp().removeClass('author-dropdown-extended').addClass('author-dropdown');
    }
    return false;
  });

【讨论】：

这个改变了，但它没有出现在#author-dropdown
好好...记得接受正确答案...只需点击一下！
好的，从现在开始我会这样做！另外，也许你会知道 - 假设我想更改一个类，假设我的作者下拉列表是一个类，我应该添加什么而不是“id”？
查看上面的编辑...我使用了 removeClass 和 addClass，因此您可以添加更多不会更改的类。

【解决方案2】：

修改这个脚本？试试这个。

$(document).ready(function() {
    $('#showhide').click(function() {
        if ($('#author-dropdown').css('display') == 'none') {
            $('#author-dropdown-extended').slideUp('fast', function() {
                $('#author-dropdown').slideDown('slow');
            });
        } else {
            $('#author-dropdown').slideUp('fast', function() {
                $('#author-dropdown-extended').slideDown('slow');
            });
        }
        return false;
    });
});

【讨论】：

【解决方案3】：

请注意，您可能不应该动态更改文档中的 ID - 为此使用 class 属性。但如果你真的愿意，你也可以——使用 jQuery 1.6+：

var $elem = $('#author-dropdown');
$elem.prop('id', 'new-id');

在旧的 jQuery 版本中，只需使用 .attr() 而不是 .prop()。

【讨论】：

使用 ID 也不错。然而，以您尝试使用它们的方式使用 ID 是不好的......对于您想要实现的目标，您最好分配一个类和一个 ID，然后添加/删除该类以改变外观元素的
@Mathias 不是 id 属性，而不是属性？那么应该使用attr() 而不是prop()？
@StuperUser：当然，它是 HTML 中的属性，但它可以作为 DOM0 中的属性使用。所以你可以使用el.setAttribute('id', 'foo')（使用jQuery：$el.attr('id', 'foo)）或el.id = 'foo'（使用jQuery：$el.prop('id', 'foo')）。我更喜欢后者（函数调用通常比设置属性慢得多），但两种解决方案的效果相同。