JQUERY HTML DIV hide and show, основанный на значении метки

Question

У меня есть метка, которая показывает динамические значения на основе действий пользователя. Например, 1 или 2. Я хотел бы показать элемент div с id = "charts_div", если значение метки равно «1» Я хотел бы скрыть элемент div, если значение «2» Этот пример упрощен насколько это возможно, так что я мог бы получить основную идею, где я застрял

HTML

<label id="label"></label> 
<div id="chart1_div" style="width:100%; height:200px"></div> 
<div id="chart2_div" style="width:100%; height:200px"></div> 

Jquery

$(document).ready(function() { 
$('#label').bind('change', function (e) { 
if ($('#label').text() == "1") 
{ 
$('#chart1_div').show(); 
$('#chart2_div').hide(); 

} 
else if $('#label').text()=="2") 
{ 
    $('#chart1_div').hide(); 
    $('#chart2_div').show(); 
}   
}).trigger('change'); 
}); 

Answer 1

Вы не можете связать change событие элемента, d У этого не было такого события. Поместите эту логику изменений внутри события, которое фактически выполняет изменение текста label.

Answer 2

Как было сказано, вы не можете привязать событие change к label. Сделайте все, что меняет ваш ярлык, также измените отображаемые div. Предположив, что это кнопка, сделать что-то вроде этого:

HTML

<label id="myLabel">1</label> 
<button id ="myButton">Toggle between 1 and 2</button> 
<div id="chart1_div" style="width:100%; height:200px">a</div> 
<div id="chart2_div" style="width:100%; height:200px">b</div> 

JS

$(document).ready(function() { 
    $("#myButton").click(function(){ 
     if ($('#myLabel').text() == '1') 
     { 
      $("#myLabel").text('2'); 
      $('#chart1_div').show(); 
      $('#chart2_div').hide(); 
     } else if ($('#myLabel').text()=='2') 
     { 
      $("#myLabel").text('1'); 
      $('#chart1_div').hide(); 
      $('#chart2_div').show(); 
     }   
    }); 
}); 

Заканчивать живой пример на этом jsfiddle;)