Question

因为jQuery不起作用，我需要将以下内容翻译成直接的javascript。 jQuery在这个页面上不起作用，我安装了多个jQuery，但我找不到它们。

<script>
    $(function () {
        $('#printFrame').hide();

        $('#print').click(function () {
            $('#printFrame').attr('src', 'print.php?max=' + $('#brSt').val());
        });
    });
</script>
<body>
    <td>Number desk:</td>
    <td><input type="number" id="brSt" value="10"><td>
    <tr>
        <td></td>
        <td><input type="submit" id="print" value="Print"><td>
    </tr>
    <iframe id="printFrame"></iframe>

Answer 1

   var frame = document.getElementById("printFrame");
   var brStValue = document.getElementById('brSt').value;
   frame.style.display = 'none';

   document.getElementById("print").addEventListener("click", function(){
      frame.setAttribute("src",'print.php?max=' + brStValue);
   });

Answer 2

除了你的HTML乱七八糟的事实，你可以使用：

<html>
    <body>
        <table>
            <tr>
                <td>Number desk:</td>
                <td><input type="number" id="brSt" value="10"><td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" id="print" value="Print" onClick="srcChange();"><td>
            </tr>
        </table>
        <iframe id="printFrame" style="display: none;"></iframe> 
    </body>
    <script>
        function srcChange() {
            var max = document.getElementById('brSt').value;
            document.getElementById('printFrame').src ="print.php?max=" + max;
        }
    </script>
</html>

Answer 3

这是一个完整的跨浏览器解决方案

(function(d){
  var frame = d.getElementById('printFrame'),
      brst = d.getElementById('brSt');
  function updateSource(e){
    frame.src = 'print.php?max=' + brst.value;
  }
  frame.style.display = 'none';
  if(d.addEventListener){
      d.getElementById('print').addEventListener('click',updateSource,'false');
    return;
  }
  if(d.attachEvent){
    d.getElementById('print').attachEvent('click',updateSource);
    return;
  }

}(document));

将jQuery转换为javascript

3 个答案: