jQuery 完成隱藏和顯示功能

Question

我是 jQuery 新手，我想用它來實現以下兩個功能：

• 當用戶從下拉列表中選擇隱藏選項時隱藏消息 1 和消息 2。

• 當用戶選擇顯示時，動畫隱藏的文本緩慢顯示並在顯示效果完成后在 div 元素內顯示一條消息。

這是我稍后需要使用的 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>

任何幫助，將不勝感激。 謝謝

Answer 1

$("#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!");

        });

    }

});

未經測試，但它應該工作。

Answer 2

好吧，我可以給你最簡單的 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>