JQuery slideToggle替换图像src
问题描述:
当单击向上/向下箭头以滑动隐藏div时,将调用此函数。如果div被隐藏,则箭头指向下方,并在显示div时变为up。如果显示div,则箭头指向隐藏div并在div关闭时向下改变。我只是想知道是否有更有效的方法来做到这一点,或者如果这是正确的方式。谢谢。JQuery slideToggle替换图像src
function showInfo(info_id) {
var img_id = '#arrow_'+info_id;
var div = '#info_'+appointment_id;
$(div).slideToggle('normal',function() {
if ($(this).is(':visible')) {
$(img_id).attr('src',$(img_id).attr('src').replace('_down','_up'));
}
else {
$(img_id).attr('src',$(img_id).attr('src').replace('_up','_down'));
}
});}
答
首先,你拥有的是完全正确的。如果你想缩短了一点,但(看来你从问题可能)和你自己的jQuery 1.4以上版本,你可以通过一个函数来.attr()
,像这样:
function showInfo(info_id) {
$('#info_'+appointment_id).slideToggle('normal',function() {
$('#arrow_'+info_id).attr('src', function(i, src) {
return $(this).is(':visible') ? src.replace('_down','_up')
: src.replace('_up','_down');
});
});
}
格式为.attr('attributeToChange, function(index, currentVal) {})
,所以你可以以相当干净的方式使用函数中的当前值。
答
稍有不同的版本。
$('.accHead').click(function() {
var $title = this;
var $toggle = $(this).next();
$(this).next().slideToggle('slow',function() {
if ($('img',$title).length > 0){
$('img',$title).attr('src', function(i, src) {
return $toggle.is(':visible') ? src.replace('_down','_up') : src.replace('_up','_down');
});
}
});
答
function HideShowItem(item){
var liID = item.getAttribute("id");
// First change the url of image
var imageUrl = ($('#' + liID).css('display') == "none" ? "url('images/minus.png')" : "url('images/plus.png')");
$('#' + liID).css("src", imageUrl);
//then use slidetoggle jquery function
$("#" + liID).find("ul").slideToggle("slow");
}