Question

我有问题。我是从输入表单创建一个div，但是当我用.hover函数悬停我的鼠标时，它只适用于每个第二个div元素（第一个，第三个，第五个，第7个......）。我该如何解决？ JS功能有什么问题？谢谢你的回答。

JS：

$("#entryButton").click(function(){
  event.preventDefault(); //stops refreshing
  var query = $("#entry").val(); //string z inputa
  if (query !== "") {
    var trashButton = "<button class='trash'>DEL</button>"
    var registry = "<div class='drag'>" + "<p>" + query + "</p>" + trashButton + "</div>"
    $("#list").append(registry); //add div with query and ubbton

    $("#list").sortable({
      //axis: "y",
    });

    $(".drag").hover(function() {
      $(this).toggleClass("mousehover")
    });

    $("#entry").val(""); //clear value

    return false; //also stops refreshing
    console.log(registry);

  }
})

HTML：

<div class="container">
  <form>
    <input type="text" id="entry">
    <button id="entryButton">button</button>
  </form>
  <ul id="list">
  </ul>
</div>

CSS：

body {
  font-size: 14px;
}

form {
  float:right;
}

.container {
  min-width:300px;
  width:20%;
  margin: 0 auto;
  margin-top:5px;
}

.drag {
  margin-top:5px;
  background-color:lemonchiffon;
  display:inline-flex;
  width:100%;
}
.trash {
  position:absolute;
  margin-left:190px;
}

.mousehover {
  opacity:0.5;
}

Answer 1

问题是您多次添加hover事件。最好只使用$(document).on()进行一次。

＆＃13;

$("#entryButton").click(function(){
  event.preventDefault(); //stops refreshing
  var query = $("#entry").val(); //string z inputa
  if (query !== "") {
    var trashButton = "<button class='trash'>DEL</button>"
    var registry = "<div class='drag'>" + "<p>" + query + "</p>" + trashButton + "</div>"
    $("#list").append(registry); //add div with query and ubbton

    $("#list").sortable({
      //axis: "y",
    });

    $("#entry").val(""); //clear value

    return false; //also stops refreshing
    console.log(registry);

  }
});

$(document).on("mouseenter mouseleave", ".drag", function() {
  $(this).toggleClass("mousehover");
});

＆＃13;

body {
  font-size: 14px;
}

form {
  float:right;
}

.container {
  min-width:300px;
  width:20%;
  margin: 0 auto;
  margin-top:5px;
}

.drag {
  margin-top:5px;
  background-color:lemonchiffon;
  display:inline-flex;
  width:100%;
}
.trash {
  position:absolute;
  margin-left:190px;
}

.mousehover {
  opacity:0.5;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="container">
  <form>
    <input type="text" id="entry">
    <button id="entryButton">button</button>
  </form>
  <ul id="list">
  </ul>
</div>

＆＃13;

Answer 2

您可以使用解决方案https://jsfiddle.net/wcu4w1mn/

＆＃13;

$("#entryButton").click(function(){
  event.preventDefault(); //stops refreshing
  var query = $("#entry").val(); //string z inputa
  if (query !== "") {
    var trashButton = "<button class='trash'>DEL</button>"
    var registry = "<div class='drag'>" + "<p>" + query + "</p>" + trashButton + "</div>"
    $("#list").append(registry); //add div with query and ubbton

    $("#list").sortable({
      //axis: "y",
    });

    $(".drag").last().hover(function() {
      $(this).toggleClass("mousehover")
    });

    $("#entry").val(""); //clear value

    return false; //also stops refreshing
    console.log(registry);

  }
})

＆＃13;

body {
  font-size: 14px;
}

form {
  float:right;
}

.container {
  min-width:300px;
  width:20%;
  margin: 0 auto;
  margin-top:5px;
}

.drag {
  margin-top:5px;
  background-color:lemonchiffon;
  display:inline-flex;
  width:100%;
}
.trash {
  position:absolute;
  margin-left:190px;
}

.mousehover {
  opacity:0.5;
}

＆＃13;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
  <form>
    <input type="text" id="entry">
    <button id="entryButton">button</button>
  </form>
  <ul id="list">
  </ul>
</div>

＆＃13;

仅更改了代码 将hover事件添加到最后添加的元素。

$(".drag").last().hover(function() {
  $(this).toggleClass("mousehover")
});

希望这会对你有所帮助。

jQuery - 悬停仅适用于每个第二个div

2 个答案: