我有问题。我是从输入表单创建一个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;
}
答案 0 :(得分:3)
问题是您多次添加hover
事件。最好只使用$(document).on()
进行一次。
$("#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;
答案 1 :(得分:2)
您可以使用解决方案https://jsfiddle.net/wcu4w1mn/
$("#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")
});
希望这会对你有所帮助。