如何在一個地方使用onclick上移/下移div使用jquery

這是我的第一篇文章，所以我尋求幫助和可能的意見。我想使用jQuery函數單擊「onclick」時，通過上下一個位置來改變div（通過使用工具AddR添加）。我寫了類似的東西，但它沒有工作.. 有人可以幫我，我應該改進什麼？感謝您的幫助如何在一個地方使用onclick上移/下移div使用jquery

<script> 
    function AddR(k) { 
    Radio_L = Radio_L + 1; 
    Radio_N = "Radio" + Radio_L; 
    $("#" + k.id + "").append("<div id='"+Radio_N+"'>" + Radio_N + "<br /><br />" + 
     "<button type='submit' class='button' style='float: left;' onclick='AddR(" + Radio_N + ");' >Add</button>" + 
     "<button type='submit' class='button' style='float: left;' onclick='UpR(" + Radio_N + ");' >Up</button>" + 
     "<button type='submit' class='button' style='float: left;' onclick='DownR(" + Radio_N + ");' >Down</button><br />" + 
     "<br />" + "<input type='text'>" + "<br /><br />" + '</div>' 
    ); 
    } 

    function UpR(k) { 
    var pos = (this).index(); 
    var parent = $("#" + k.id + ""); 
    parent.insertAfter(pos.next()); 
    } 

    function DownR(k) { 
    var pos = (this).index(); 
    var parent = $("#" + k.id + ""); 
    parent.insertBefore((pos.next()); 
    } 
</script>

來源

2013-06-26 mikelosfreman

var pos = (this).index(); 
      ^---- Missing $ sign

應該是

var pos = $(this).index();

而且

pos with give you an number，他們沒有的next方法。只有jQuery objects做

試試這個

function UpR(k) { 
     var $elem = $(this).next(); 
     var parent = $("#" + k.id + ""); 
     parent.insertAfter($elem); 

    }

來源

2013-06-26 16:40:14

POS沒有方法'.next（）'也 –

我加了''但它仍然無效 – mikelosfreman

@mikelosfreman ..檢查編輯... –

試試這個代碼（也在這裏：http://cdpn.io/AjHyE），我發現了一些語法錯誤：

<script> 
var Kon_L = 0; 

function Kon() { 
    Kon_L = Kon_L+ 1; 
    var Kon_R_N = "Kon" + Kon_L; 

    $("<div id='" + Kon_R_N + "' class='ka' > " + "Kon " + Kon_L + 
     "<button type='submit' class='button' style='float: left;' onclick='UpR(\"" + Kon_R_N + "\");' >UpDIV</button>" + 
     "<button type='submit' class='button' style='float: left;' onclick='DownR(\"" + Kon_R_N + "\");' >DownDIV</button>" + 
     "<br />Tekst<br />" + 
     "</div>").appendTo(".Place"); 
} 

function UpR(k) { 
    var self = $("#"+k); 
    var prev = self.prev(); 
    self.insertBefore(prev); 
} 

function DownR(k) { 
    var self = $("#"+k); 
    var next = self.next(); 
    self.insertAfter(next); 
} 
</script>

另外，請檢查您的瀏覽器控制檯，看看它是否加工。

無論如何，因爲你所要求的意見，我會推薦給你聽：

從您的JS代碼中刪除HTML。你可以參考一些jQuery選擇器的按鈕，並將它們移動
從HTML中刪除內聯樣式，可以輕鬆地移動按鈕類中的浮點屬性
從JS中解耦JS甚至更多在HTML中onclick，但使用jQuery click（）函數與選擇器

如果你嘗試這些修改，我認爲你可以從堆棧溢出社區獲得更多的反饋。

來源

2013-06-26 17:57:08

我做了這樣的事情，但不幸的是它不工作.. 你能幫忙嗎？ http://jsfiddle.net/uka2C/1/ – mikelosfreman

看看代碼，我編輯它，現在它的工作，你有codepen的例子 –

我會提供一個簡化HTML的解決方案，不會在代碼中放入硬編碼的HTML，並使用類而不是嵌入標記中的大量代碼。

有了這個標記開始：

<div id='Radio_N0' class='container'><span class='containerName'>Radio_N 0</span> 
    <br/> 
    <button type='submit' class='button add'>Add</button> 
    <button type='submit' class='button up'>Up</button> 
    <button type='submit' class='button down'>Down</button> 
    <br/> 
    <input type='text' /> 
    <br /> 
</div>

您可以使用此代碼來創建更多的這些和移動它們：

function AddR(k) { 
    Radio_L = $('.container').length; 
    var Radio_N = "Radio_N" + Radio_L; 
    var newDiv = k.parents('.container').clone(); 
    newDiv.attr('id', Radio_N).find('.containerName').text(Radio_N); 
    newDiv.insertAfter(k.parents('.container')); 
} 

function UpR(k) { 
    var parent = k.parents('.container'); 
    var pos = parent.prev(); 
    parent.insertBefore(pos); 
} 

function DownR(k) { 
    var parent = k.parents('.container'); 
    var pos = parent.next(); 
    parent.insertAfter(pos); 
} 
$(document).on('click', '.add', function() { 
    AddR($(this)); 
}); 
$(document).on('click', '.up', function() { 
    UpR($(this)); 
}); 
$(document).on('click', '.down', function() { 
    DownR($(this)); 
});

看到它在這裏的行動：http://jsfiddle.net/uka2C/

來源

2013-06-26 19:41:09

如何在一個地方使用onclick上移/下移div使用jquery

回答

相關問題