[英]jQuery accomplish hide and show functionalities
I'm new to jQuery , I'd like to use it to implement following two features:我是 jQuery 新手,我想用它来实现以下两个功能:
Hide Message 1 and Message 2 when the user selects Hide option from the dropdown list.当用户从下拉列表中选择隐藏选项时隐藏消息 1 和消息 2。
When the user selects show, animates hidden text to show slowly and display a message inside div element after the show effect is completed.当用户选择显示时,动画隐藏的文本缓慢显示并在显示效果完成后在 div 元素内显示一条消息。
This is my html markup example that I need to use later这是我稍后需要使用的 html 标记示例
<select id="operation">
<option value="">Select one...</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
<ul id="li">
<li id="x1" class="myClass1">Message 1</li>
<li id="x2" class="myClass1">Message 2</li>
<li id="x3" class="myClass2">Message 3</li>
</ul>
<div id="msg"></div>
Any help would be appreciated.任何帮助,将不胜感激。 Thanks
谢谢
$("#operation").change(function(){
if ($(this).val() == "2"){ // user chose Hide
$("#x1, #x2").hide();
} else if ($(this).val() == "1"){ // user chose Show
$("#x1, #x2").fadeIn('slow', function(){
//What to do when fadeIn animation is complete
$("#msg").html("Hi there!");
});
}
});
Untested, but it should work.未经测试,但它应该工作。
Well, I can give you the most easiest answer for jQuery:好吧,我可以给你最简单的 jQuery 答案:
<script>
$('#operation').on('change', function() {
if ( this.value == '2');
{
$("#x2").hide();
$("#x3").hide();
}
else
{
$("#x2").show();
$("#x3").show();
}
});
});
</script>
<ul id="li">
<li id="x1" name="test1" class="myClass1">Message 1</li>
<li id="x2" name="test2" class="myClass1">Message 2</li>
<li id="x3" name="test3" class="myClass2">Message 3</li>
</ul>
<select id="operation">
<option value="">Select one...</option>
<option value="1">Show</option>
<option value="2">Hide</option>
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.