用JQUERY移動元素卡住

-1

我需要創建一個按鈕來移動我的第一個圖像元素前面的最後一個圖像元素，所以我使用了附加功能，但是當我單擊moveUpButton時，它所做的就是將元素左移到沒有顯示。我在代碼中丟失了什麼嗎？用JQUERY移動元素卡住

<!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>

來源

2012-02-09 user1200006

你包含jQuery兩次。 ''（function（）{'相當於'$（「document」）。ready（'。 – j08691 2012-02-09 16:20:35

你需要修復的雙重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>

你應該只使用其中的一個。

UPDATE：

接下來，你應該改變moveUpButton和moveDownButton正確插入：

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

您需要在目標圖像（股利）的母公司插入。

來源

2012-02-09 15:42:46

剛剛嘗試過，結果雖然相同 – user1200006 2012-02-09 15:52:21

工作完美，我甚至沒有想過父母，非常感謝 – user1200006 2012-02-09 16:23:36

太棒了！我很高興它的工作。 – 2012-02-09 16:24:59

用JQUERY移動元素卡住

回答

相關問題