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

Question

這是我的第一篇文章，因此我尋求幫助和可能的評論。 當我使用jQuery函數單擊“ onclick”時，我想上下一個位置更改div（使用工具AddR添加）。 我寫了類似的東西，但是沒用。有人可以幫助我，我應該改進什么？ 謝謝你的幫助

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

Answer 1

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);

    }

Answer 2

嘗試以下代碼（也在此處： 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>

另外，請檢查您的瀏覽器控制台是否正常運行。

無論如何，由於您要發表評論，所以我會向您推薦一些東西：

1. 從您的JS代碼中刪除HTML。 您可以使用一些jQuery選擇器來引用按鈕並將它們移動
2. 從HTML刪除內聯樣式，您可以輕松地在button類中移動float屬性
3. 進一步將JS與HTML分離，不要在HTML中使用onclick，而是將jQuery click（）函數與選擇器一起使用

如果您嘗試這些修改，我認為您可以從Stack Overflow社區獲得更多反饋。

Answer 3

我將提供一種簡化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/