2

这是我的第一篇文章，所以我寻求帮助和可能的评论。当我使用 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>
4

3 回答 3

1

我将提供一种简化 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-26T19:41:09.370 回答
0

试试这段代码（也在这里：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 中删除内联样式，您可以轻松地在按钮类中移动 float 属性
  3. 将 JS 与 HTML 进一步分离，不要在 HTML 中使用 onclick，而是使用带有选择器的 jQuery click() 函数

如果您尝试这些修改，我认为您可以从 Stack Overflow 社区获得更多反馈。

于 2013-06-26T17:57:08.987 回答
0 
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-26T16:40:14.250 回答