我想修改我的jQuery腳本添加不同#ID

Question

我有推動內容倒在點擊這個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，並且當display == block時，id應該是＃author-dropdown-extended。我應該如何修改這個腳本才能實現？

Answer 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; 
    }); 

Answer 2

請注意，您可能不應該動態更改文檔中的ID - 請使用class屬性。但是你可以，如果你真的想 - 使用jQuery 1.6+：

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

在舊的jQuery的版本中，只使用.attr()代替.prop()。

Answer 3

修改此腳本？嘗試這個。

$(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; 
    }); 
});