Изменить текст подсказки на тумблере

Question

Как изменить текст подсказки на тумблере.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')
       }
       });
    }

Answer 1

В вашем фрагменте кода 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>

Answer 2

попробуйте 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');
  }
}