jQuery:根据状态切换href的标题属性
我需要完成一件非常简单的事情,而我目前所做的只是工作的一半 我有一个链接jQuery:根据状态切换href的标题属性,jquery,Jquery,我需要完成一件非常简单的事情,而我目前所做的只是工作的一半 我有一个链接,您可以看到它没有title属性 加载页面时,脚本会添加此标题属性: 单击时,将切换选中的类,然后应更改title属性,因此最终结果如下所示: 我有这段代码,但尽管它更改了新代码的title属性,但当再次单击时,title属性不会被交换,这正是我需要的: $('.favorites').attr('title','Add to Favorites').click(function(){ $(this).toggleC
,您可以看到它没有title属性
加载页面时,脚本会添加此标题属性:
单击时,将切换选中的类,然后应更改title属性,因此最终结果如下所示:
我有这段代码,但尽管它更改了新代码的title属性,但当再次单击时,title属性不会被交换,这正是我需要的:
$('.favorites').attr('title','Add to Favorites').click(function(){
$(this).toggleClass('checked').attr('title','Added to Favorites');
});
我如何在单击时“切换”属性
我创建这个来说明这个问题
提前感谢。您可以在is/else中执行,也可以只使用三元运算符
//Toggle attribute
$('.favorites').attr('title', 'Add to Favorites').click(function() {
$(this)
.toggleClass('checked')
.attr('title', $(this).hasClass('checked') ? "Item added to Favorites":'Added to Favorites');
});
这最终与
$('.favorites').attr('title', 'Add to Favorites').click(function() {
$(this).toggleClass('checked');
if($(this).hasClass('checked')){
$(this).attr('title',"Item added to Favorites");
}else{
$(this).attr('title','Added to Favorites');
}
});
试试这个
$('.favorites').attr('title', 'Add to Favorites').click(function() {
$(this).toggleClass('checked');
var title = 'Add to Favorites' ;
if( $(this).hasClass('checked')){
title = 'Added to Favorites';
}
$(this).attr('title', title);
});
使用
数据-
属性存储备用标题,然后在每次单击时使用标题
属性切换该属性。jQuery将使用该方法自动检索数据-
属性中的任何内容。这具有非常灵活的优点——任何。收藏夹链接都可以使用此事件处理程序交换任何标题文本
<a href="#" class="favorites" data-title2="Added to Favorites" title="Add to Favorites">Favorites</a>
或者,如果您希望它更灵活,请先添加一些代码来检测是否存在data-title2
:
$('.favorites').click(function() {
var $this = $(this),
t1 = $this.attr('title'),
t2 = $this.data('title2');
$this.toggleClass('checked');
if (t2) {
$this.attr('title', t2).data('title2', t1);
};
});
我知道我来晚了,但我已经写了一个小插件来处理属性的切换
只要把这个放在活动电话里,你就很好了
$('element').click(function(){
$(this).toggleProperty({
propName: 'title',
toggleTo: 'Added From Favorites',
toggleFrom: $(this).prop('title')
});
});
另外,toggleFrom
属性允许您输入初始标题,或您想要在其中来回切换的新标题。Sushanth--,您的答案和wirey的作品很棒,但我选择了您的,因为您先发布了。。。以1秒计:p。非常感谢。哦,天哪,谢谢你的信息,非常有价值。下次我需要处理属性切换时会考虑的。给了你一票。谢谢
(function($) {
var methods = {
init: function(options){
var defaults = {
propName: '',
toggleTo: '',
toggleFrom: ''
}
return this.each(function() {
var $this = $(this);
var settings = $.extend({}, defaults, options);
if($this.data('toggled') == 'false' || !$this.data('toggled')){
$this.data('toggled', 'true');
$this.prop(settings.propName, settings.toggleTo);
}else{
$this.data('toggled', 'false');
$this.prop(settings.propName, settings.toggleFrom);
}
});
}
}
$.fn.toggleProperty = function( method ) {
if (methods[method]) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.toggleProperty' );
}
};
})(jQuery);
$('element').click(function(){
$(this).toggleProperty({
propName: 'title',
toggleTo: 'Added From Favorites',
toggleFrom: $(this).prop('title')
});
});