Question

我有一个标签，根据用户操作显示动态值。例如1或2。如果标签值为“1”，我想显示id =“charts_div”的div元素我想隐藏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事件绑定到没有此类事件的元素。将此更改逻辑放在实际更改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;）

的实际示例

JQUERY HTML DIV根据标签值隐藏和显示

2 个答案: