为什么我的输入不能触发我的函数？

Question

我制作了 input 按钮，但是它们似乎不能触发我的函数... 有人能帮忙解决一下吗？

<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" onclick="close();"></input>
  <input id="windowSmall" type="button" onclick="min();"></input>
</div>

以及我的jQuery：

function close() {
  $("#inputWindow").hide(300);
}

function min() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}

- Shiva Traanman

---

将它们放在document.ready中。 - guradio

@guradio，函数是使用onclick调用的。因此，在执行代码时，函数和DOM元素都在DOM树中定义。如果将函数放在document.ready中，则它们不会在全局范围内定义。最佳实践是在$()作用域之外定义函数。 - Adam Azad

minimize是从哪里来的？ - Sverri M. Olsen

你在控制台里面看到任何错误信息了吗？ - Sam

请更改函数名，因为close()函数可能会与window.close()混淆，并且不能正常工作。 - Yogesh Sharma

Answer 1

尝试将关闭函数的名称更改为其他名称，例如closeTag，因为它可能会与window.close（）函数混淆。更改函数名称后，现在可以正常工作，请检查 -

function closeTag() {
  $("#inputWindow").hide();
}

function minTag() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" value="Close" onclick="closeTag()"/>
  <input id="windowSmall" type="button" value="Min" onclick="minTag()"/>
  
  <div id="inputWindow">
  hide text on Close button click
  </div>
</div>

- Yogesh Sharma

---

你能检查一下我的答案吗？ - Jagadeesh

@Jagadeesh 在你的情况下，如果我想从输入中调用任何函数，那么我是做不到的，因为你已经将该函数与ID固定在一起了，而我认为用户并不需要这样。 - Yogesh Sharma

@ShivaTraanman，将 minimize = true; 添加到关闭函数中将对您有用。 - Jagadeesh

Answer 2

您的JavaScript函数需要在HTML代码片段之前定义。就像这样：

<script>
function close() {
  $("#inputWindow").hide(300);
}

function min() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}
</script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" onclick="close();"></input>
  <input id="windowSmall" type="button" onclick="min();"></input>
</div>

或者你可以使用jQuery的方式：

<script>
document.ready(function() {

    $('#WindowClose').click( function() {
      $("#inputWindow").hide(300);
    });

    $('#windowSmall').click( function() {
      if (minimize === false) {
        $("#inputWindow").hide();
        $('#windowBar2').css('display','block');
        $('#windowBar2 h3').css('display','block');
        minimize = true;
      } else {
        $("#inputWindow").show();
        $('#windowBar2').css('display','none');
        $('#windowBar2 h3').css('display','none');
        minimize = false;
      }
    });
});
</script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button"></input>
  <input id="windowSmall" type="button"></input>
</div>

- Clay

---

你能 fork 我的笔吗？我似乎也无法让它工作起来... http://codepen.io/shiva112/pen/dGMrWB - Shiva Traanman

我已经提供了可工作的代码片段。你能检查一下它是否符合你的需求吗？如果是，请将其标记为答案。 - Jagadeesh

我猜你的需求是，当点击关闭时，它应该隐藏输入框。如果点击打开，则应该打开输入窗口，再次点击打开则应该隐藏。我说得对吗？ - Jagadeesh

@Jagadeesh，我不明白你的意思，需求就在代码里面。这些函数运行得很好，但是当我按下按钮时它们就无法正常工作了。 - Shiva Traanman

@ShivaTraanman，请确保在关闭函数中添加 minimize = true;。 - Jagadeesh

Answer 3

考虑在你的函数中使用return false或event.preventDefault()。

var minimize;
function close() {
  $("#inputWindow").hide(300);
  return false;
}

function min() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
  return false;
}

- Vixed

Answer 4

$(function(){

  var minimize = false
  function close() {
    $("#inputWindow").hide(300);
    minimize = true
  }

function toggleInputWindow() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}
  $('#WindowClose').on('click',function(){
      close();
  })
  
  $('#windowSmall').on('click',function(){
      toggleInputWindow();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" value="close"/>
  <input id="windowSmall" type="button" value="open"/>
</div>
<div id="inputWindow">input window</div>

- Jagadeesh

Answer 5

在点击事件中添加javascript:close()，而不是直接调用close()函数。 使用方式如下：

onClick="javascript:close()", onClick="javascript:min()".

- Manoj S Ramaswamy

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Manoj S Ramaswamy