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; 
    }); 
});