Question

我需要创建一个按钮来移动我的第一个图像元素前面的最后一个图像元素，所以我使用了追加功能，但是当我点击moveUpButton时，它所做的就是将我的元素向左移动直到没有显示。我在代码中遗漏了什么吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
.wrappedElement {
    border: 1px solid red;
    background-color: cyan;
}
img.wrappedElement {
    border-color: brown;
    border-width: 4px;
}
div.wrappedElement {
    padding: 5;
}
</style>
<script language="javascript" src="_scripts/jquery-1.7.1.min.js"></script>
<script type="javascript" src="_scripts/jquery-1.7.1.min.js"></script>


<script language="javascript">
$(function(){
    $("#hideButton").click(function (){$("img").hide();});
    $("#showButton").click(function (){$("img").show();});
    $("#toggleButton").click(function (){$("img").toggle();});
    $("#evenButton").click(function (){$("img:odd").hide();        

            $("img:even").show();});
    $("#oddButton").click(function (){$("img:even").hide();         
            $("img:odd").show();}); 
    $("#moveUpButton").click(function 
            (){$("img:first").append($("img:last"));});
    $("#moveDownButton").click(function 
            (){$("img:last").prepend($("img:first"));});
    });
</script>

<script language="javascript">
$("document").ready(function() {
    $("img").addClass("wrappedElement");
});

</script>


</head>
<body>
<div id="buttonBar">
    <button id="hideButton" type="submit">Hide</button>
    <button id="showButton" type="submit">Show</button>
    <button id="toggleButton" type="submit">Toggle</button>
    <button id="evenButton" type="submit">Show Even Images</button>
    <button id="oddButton" type="submit">Show Odd Images</button>
    <button id="moveUpButton" stype="submit">Move images left</button>
    <button id="moveDownButton" stype="submit">Move images right</button>
<p>
<div id="content">
    <img src="Forest Flowers.jpg" id="forest" title="Forest Flowers"/>
        <img src="Frangipani Flowers.jpg" id="frangipani" title="Frangipani 
Flowers"/>
    <img src="Garden.jpg" id="garden" title="Garden"/>
    <img src="Green Sea Turtle.jpg" id="turtle" title="Green Sea Turtle"/>
    <img src="Humpback Whale.jpg" id="whale" title="Humpback Whale"/>
</div>
<div id="result"></div>
</body>

Answer 1

您需要修复双jquery导入

<script language="javascript" src="_scripts/jquery-1.7.1.min.js"></script>
<script type="javascript" src="_scripts/jquery-1.7.1.min.js"></script>

你应该只使用其中一个。

更新：

接下来，您应该更改moveUpButton和moveDownButton以正确插入：

$("#moveUpButton").click(function 
            (){$("img:first").parent().append($("img:last"));});
$("#moveDownButton").click(function 
            (){$("img:last").parent().prepend($("img:first"));});
});

您需要插入目标图像的父级（div）。

坚持在JQUERY中移动元素

1 个答案: