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>

同时检查浏览器控制台以查看它是否正常工作。

无论如何，既然你在征求意见，我会向你推荐一些东西：

从JS代码中删除HTML。您可以使用一些jQuery选择器引用按钮并移动它们
从HTML中删除内联样式，您可以轻松地在按钮类
将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/

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

3 个答案: