Question

我正在尝试让以下jquery切换到IE，FF和尽可能多的浏览器，但目前它仅适用于FF。在这里，我只有在选择某个选项时才会有切换（在下拉选择和textarea之间）（在这种情况下为“bbb”）。还有，有更好的方法来编写相同的脚本（一种更干净的方式，可能）？ 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();
   });
});

在进行此操作时，我发现了一些可能导致其他浏览器窒息的事情。

1）$（“＃len”）。val（'无'）;
没有带有该ID的元素。

2）$（“＃sel_id”）。更改
这应该是“#sel”（选择控件）而不是“#sel_id”（div） - 某些浏览器可能无法识别div上的“更改”事件。

Answer 2

将您的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;
    });
});

Answer 3

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

当然#sel？ #sel_id是div，不是change。在IE中，change事件不会“冒泡”，因此您无法在祖先元素上捕获它。

jquery为不同的浏览器切换

3 个答案: