Question

我有一个包含2个div的表单，并且每个div都是一个输入，当我按下与每个输入相关联的按钮时，没有任何反应，我相信它与表单中的div有关。我知道这个代码在没有2个div的情况下有效，但我需要div，所以我可以按照它的方式进行布局。有什么建议吗？

我知道我忘了在这篇文章中添加JQuery，这是我的错误，但即使添加了JQuery，它也无法在我的项目中运行，此代码基于此项目。

直播代码：https://jsfiddle.net/1brk3npL/

$(document).ready(function() {
  $('#addLikes').click(function() {
    if ($('#likes').val() === "") {
      alert("Likes input is empty.");
    } else {
      $('#likesOutput').append($("<option></option>")
        .attr("value", $('#likes').val()).text($('#likes').val()));
    }
  });
  $('#removeLikes').click(function() {
    $('#likesOutput option:selected').remove();
  });

  $('#addDislikes').click(function() {
    if ($('#dislikes').val() === "") {
      alert("Dislikes input is empty.");
    } else {
      $('#dislikesOutput').append($("<option></option>")
        .attr("value", $('#dislikes').val()).text($('#dislikes').val()));
    }
  });
  $('#removeDislikes').click(function() {
    $('#dislikesOutput option:selected').remove();
  });
});

select {
  width: 250px;
}
input[type=text] {
  font-family: "ProximaRegular", sans-serif;
  width: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="preferenceDiv">
  <form id="preferenceInput">
    <div style="float:left; position:relative; width : 50%;">

      Likes:
      <br/>
      <input type="text" id="likes" />
      <br />
      <button id="addLikes" type="button">Add Likes</button>
      <button id="removeLikes" type="button">Remove Likes</button>
      <br />Selected Likes:
      <br />
      <select id="likesOutput" multiple="multiple"></select>

    </div>

    <div style="float:left; position:relative; width : 50%;">

      Dislikes:
      <br/>
      <input type="text" id="dislikes" />
      <br />
      <button id="addDislikes" type="button">Add Dislikes</button>
      <button id="removeDislikes" type="button">Remove Dislikes</button>
      <br />Selected Dislikes:
      <br />
      <select id="dislikesOutput" multiple="multiple"></select>

    </div>
  </form>
</div>

Answer 1

好的，所以代码在周六开始正常运行。我不知道发生了什么，我还是没有改变代码。但是一分钟它没有工作，然后突然之间就是。

Answer 2

添加jQuery并添加$ jQuery参考。

像这样点击JS的第一行

jQuery(document).ready(function ($) {

即使你包含jQuery，也缺少参考。改变它并且它会起作用。

Answer 3

只需在此https://jsfiddle.net/1brk3npL/ HTML部分中添加以下jquery库，看看它是否正常工作：）

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

由于

Answer 4

jQuery没有定义。

我刚刚在你的jsfiddle上添加了jQuery，你的代码就可以了。

点击Javascript选项 - ＆gt; FRAMEWORKS＆amp;扩展 - ＆gt;选择jQuery版本 - ＆gt;点击运行

1表格，2个分区，JQuery无法正常工作

4 个答案: