按钮文本切换不起作用
Button Text Toggle is not working
我需要什么
- 单击查看详细信息 => 显示数据。 显示
- 数据时,显示隐藏详细信息。
网页代码
<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;"
onclick="
$(this).find('.speakers').toggle(function() {
$(this).text('Hide Details');
}, function() {
$(this).text('view details');
});">view details
<div class="speakers dis-non">
</div>
</a>
错误
JQMIGRATE: jQuery.fn.toggle(handler, handler...) is deprecated
您必须删除.toggle()
并使用.text()
。
$('#viewdetail').click(function() {
var div_text = $(this).find('.speakers').text();
if (div_text == 'Hide Details') {
$(this).find('.speakers').text('view details');
} else {
$(this).find('.speakers').text('Hide Details');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="javascript:void(0);" id="viewdetail" class="btn-primary" style="position:relative;left:20px;">
<div class="speakers dis-non">view details</div>
</a>
检查小提琴
.HTML
<a href="javascript:void(0);" id="viewdetail" class="btn-primary">view details</a>
<div class="speakers"></div>
.JS
var button = $('#viewdetail');
var content = $('.speakers');
button.click(function(){
var isOpen = content.hasClass('on');
if(isOpen){
button.html('Show Details');
content.removeClass('on');
}else {
button.html('Hide Details');
content.addClass('on');
}
});
.CSS
#viewdetail {}
.speakers {height:20px;background-color:red;transitions:all 500ms;}
.speakers.on {height:100px;}
然后你可以通过使用jQuery.text
的function
重载和三元运算符以正常的方式做到这一点。
$('#viewdetail').click(function() {
$(this).find('.speakers').text(function(_, txt) {
return !txt.indexOf("Hide") ? 'Show Details' : 'Hide Details';
});
});
相关文章:
- d3js文本传输-示例代码不起作用
- Javascript文本框验证不起作用
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- javascript文本验证不起作用.警报消息没有't显示
- 在SVG中创建带有外来对象的文本区域的Javascript不起作用
- html/jquery输入类型:单选框中的文本不起作用
- jQuery在文本输入点击时不起作用
- 如果文本框为空,则不起作用
- 对照数组脚本检查文本框中的值不起作用
- 为什么不'使用此JavaScript将文本替换为不起作用的链接
- Angular Js 尝试从主按钮回调动态更改模态文本并且不起作用
- 文本长度限制在我的 instafeed 模板中不起作用
- CKEditor - 插入文本在 setData 之后不起作用
- 动态文本大小JavaScript在IE中不起作用
- 文本颜色的随机色调不起作用
- Fabric.js文本转换不起作用
- 为什么这个使用谷歌URL的Javascript文本到语音不起作用
- Accordion文本效果在使用JavaScript的简单html页面中不起作用
- :包含不区分大小写的解决方案在替换文本以突出显示时不起作用