jquery切換到不同的瀏覽器

Question

我想獲得下面的jQuery切換到IE，FF和儘可能多的瀏覽器上工作，但目前它只能在FF上工作。在這裏，只有當選擇某個選項時（本例中爲「bbb」），纔有可用的切換（在下拉選擇和textarea之間）。另外，是否有更好的方法來編寫相同的腳本（更清晰的方式，可能）？ Click這裏檢查我現在有什麼。
非常感謝提前。

$(document).ready(function() { 
    $("#link a").hide(); 
    if ($("#sel").val() == 'bbb') $("#link a").show(); 
    $("#sel_id").change(function() { 
     if ($("#sel").val() == 'bbb') { 
      $("#link a").show(); 
     } else { 
      $("#link a").hide(); 
      $("#link").show(); 
     } 
    }); 

    $('#txtbox').hide(); 
    $('#link a').click(function() { 
     $('#txtbox').slideToggle(); 
     $(this).text($(this).text() == "(Another input option)" ? "(Method 1)" : "(Another input option)"); 
     $('#sel_id').show(); 
     if ($('#link a').text() == '(Method 1)') { 
      $(this).prev('div').hide(); 
      $('#link').prev().remove('div'); 
      $('#link').before("<div>This is another input option</div>"); 
      $('#sel_id').hide(); 
      $('#cp').val(''); 
      $('#sel').val(''); 
     } else { 
      $('#link').prev().remove('div'); 
      $('#link').before("<div>Method 1</div>"); 
     } 
     $("#len").val('None'); 
     return false; 
    }); 
}); 



    <div id="link"> 
     <div>Method 1</div><a href="#">(Another input option)</a> 
    </div> 
    <div id="sel_id"> 
     <select id="sel" name="sel"> 
      <option value="None" selected></option> 
      <option value="aaa">aaa</option> 
      <option value="bbb">bbb</option> 
     </select> 
    </div> 

    <div id="txtbox"> 
     <div style="margin-top: 5px;" class="tab">copy and paste:<br /> 
      <textarea rows="5" cols="64" id="cp" name="cp"></textarea> 
     </div> 
    </div> 

Answer 1

我想你可以通過使用更多的HTML來清理它，然後使用JS來隱藏/顯示所需的位。

<div id="select"> 
    <div class="label">Method 1<a href="#">(change me)</a></div> 
    <select id="sel" name="sel"> 
    <option value="None" selected></option> 
    <option value="aaa">aaa</option> 
    <option value="bbb">bbb</option> 
    </select> 
</div> 
<div id="textbox"> 
    <div class="label">Method 2<a href="#">(change back)</a></div> 
    <div style="margin-top: 5px;" class="tab">copy and paste:</div> 
    <textarea rows="5" cols="64" id="cp" name="cp"></textarea> 
</div> 

那麼對於JavaScript的：

$(function() { 
    $("#select a, #textbox").hide(); 
    $("#sel").change(function() { 
     if ($("#sel").val() == 'bbb') { 
     $("#select a").show(); 
     } else { 
     $("#select a").hide(); 
     } 
    }); 
    $(".label a").click(function(e) { 
     e.preventDefault(); 
     $("#select, #textbox").slideToggle(); 
    }); 
}); 

雖然工作這件事，我注意到有兩件事情可能會導致其他瀏覽器嗆。 （「＃」）。val（'None'）; $（「＃len」）。
這個ID沒有元素。這可能應該是「#sel」（選擇控制）而不是「#sel_id」（div） - 某些瀏覽器可能不會識別「更改」事件在一個div上。

Answer 2

$("#sel_id").change(function() { 

當然#sel？ #sel_id是div，它不是change。在IE中，change事件不會「冒泡」，因此您無法在祖先元素上捕捉它。

Answer 3

更新你的JS到這，它會在IE，Chrome和FireFox的工作。我可以使代碼更小，但我只是在休息時間。另外，不要忘記一旦它們都很好就縮小和/或混淆。

$(document).ready(function() { 
    // Maybe give these better variable names. 
    var anotherOptionText = "(Another input option)"; 
    var methodOneText = "(Method 1)"; 
    var bbbText = "bbb"; 
    var anchors = $("#link a"); 
    var picklist = $("#sel"); 
    var picklistContainer = $("#sel_id"); 
    var links = $("#link"); 
    var someTextBox = $('#txtbox'); 
    var cp = $('#cp'); 
    var len = $("#len"); 


    anchors.hide(); 

    if (picklist.val() === bbbText) { 
     anchors.show(); 
    } 

    picklist.change(function() { 
     if ($(this).val() === bbbText) { 
      anchors.show(); 
     } else { 
      anchors.hide(); 
      links.show(); 
     } 
    }); 

    someTextBox.hide(); 

    anchors.click(function() { 
     someTextBox.slideToggle(); 
     $(this).text($(this).text() === anotherOptionText ? methodOneText : anotherOptionText); 
     picklistContainer.show(); 

     if (anchors.text() === methodOneText) { 
      $(this).prev('div').hide(); 

      links.prev().remove('div'); 
      links.before("<div>This is another input option</div>"); 

      picklistContainer.hide(); 

      cp.val(''); 
      picklist.val(''); 
     } else { 
      links.prev().remove('div'); 
      links.before("<div>Method 1</div>"); 
     } 

     len.val('None'); 

     return false; 
    }); 
});