[英]Change tooltip text on toggle switch
如何更改拨动开关上的工具提示文本。
1)首先,默认情况下,我必须提供一些工具提示
2)另外,每当我单击切换开关时,都必须更改工具提示,但以下代码无法正常工作
问题
1)我得到的工具提示不正确。 它不是来自基金会。 谁能告诉我如何使此工具提示美化或仅添加基础类
谁能指导我做错了什么
我正在使用Foundation 5
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" onclick="chn_tooltip" id="chinese_toggle_tooltip" aria-haspopup="true" title="click to see player name in chinese">
<span class="switch_text">EN</span>
<input id="chn_eng_toggle" onclick="chinese_toggle" type="checkbox">
<label for="chn_eng_toggle"></label>
<span class="switch_text">CH</span>
</li>
</ul>
function open_tooltip(){
$(this).click(function(e){
if ( $( '#chn_eng_toggle' ).is(':checked') ){
$( '#chinese_toggle_tooltip' ).attr( 'title', '' )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in english' ).foundation('toggle')
}
else{
$( '#chinese_toggle_tooltip' ).attr( 'title', '' )
$( '#chinese_toggle_tooltip' ).attr( 'title', 'click to see player name in chinese' ).foundation('toggle')
}
});
}
试试这个https://jsfiddle.net/pnnvqj6g/
<ul class="header-info details collapse ch_en_switch">
<li class="switch small" data-tooltip-class="aniket" id="chinese_toggle_tooltip" data-tooltip aria-haspopup="true" title="">
<span class="switch_text">EN</span>
<input id="chn_eng_toggle" type="checkbox" onclick="open_tooltip()">
<label for="chn_eng_toggle"></label>
<span class="switch_text">CH</span>
</li>
</ul>
function open_tooltip(){
if ($("#chn_eng_toggle").is(":checked")) {
$('#chinese_toggle_tooltip').attr('title', 'aniket');
} else {
$('#chinese_toggle_tooltip').attr('title', 'shivam');
}
}
在您的JavaScript代码段中, $( this )
返回一个未定义的元素。 更改为:
if( $ ( '#chn_eng_toggle' ).is( ':checked' ) )
function open_tooltip () { if ( $( '#chn_eng_toggle' ).is( ':checked' ) ) $( '#chinese_toggle_tooltip' ).attr( 'title', 'aniket' ) else $( '#chinese_toggle_tooltip' ).attr( 'title', 'shivam' ) } </script>
label { position: relative; display: inline-block; width: 40px; height: 12px } label input { display:none } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s } .slider:before { position: absolute; content: ""; height: 8px; width: 18px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s } input:checked + .slider { background-color: #2196F3 } input:focus + .slider { box-shadow: 0 0 1px #2196F3 } input:checked + .slider:before { -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18px) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="header-info details collapse ch_en_switch"> <li class="switch small" onclick="open_tooltip( event )" data-tooltip-class="aniket" id="chinese_toggle_tooltip" aria-haspopup="true" title="shivam"> <span class="switch_text">EN</span> <label for="chn_eng_toggle"> <input id="chn_eng_toggle" type="checkbox"> <span class="slider"></span> </label> <span class="switch_text">CH</span> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.