Question

我有一个链接和按钮列表，其中包含使用foreach循环在php中动态生成的类名。示例输出是：

<a class="edit-url-9rwpaZV" href="page/1">This is my title</a>
<button class="edit-btn-9rwpaZV" data-text-swap="Save">Edit</button>

<a class="edit-url-5R8eBR2M" href="page/2">Why tea is great</a>
<button class="edit-btn-5R8eBR2M" data-text-swap="Save">Edit</button>

<a class="edit-url-V7Ma8Olb" href="page/3">Fish are friends</a>
<button class="edit-btn-V7Ma8Olb" data-text-swap="Save">Edit</button>

我有jQuery函数，当＆＃34;编辑＆＃34;按下按钮，我可以编辑链接的文本并通过ajax保存。

这些功能的一个例子如下：

$(document).ready(function(){
   editing=false;
   c = $(".edit-url");
   b = $(".edit-btn").click(toggle_edit);
   toggle_edit();
});

function toggle_edit()
{
  switch(editing){
    case true:
      c.get(0).contentEditable = true;
      c.css({background:"#eeeeee"});
      editing=false;
    break;
    case false:
      c.get(0).contentEditable = false;
      c.css({background:"white"});
      editing=true;
  break;
  }
}

以前（在我为每个班级名称添加唯一标识符之前），当我点击任何按钮时，它会生成所有＆＃34; .edit-url＆＃34;链接可编辑，但我不希望所有字段都可编辑，我只希望每个按钮左侧的字段可编辑（即只有一个字段）。

我想知道的是，如何在我的选择器中添加通配符/变量，以便在我点击时，例如＆＃34; edit-btn-V7Ma8Olb＆＃34;它使＆＃34; edit-url-V7Ma8Olb＆＃34;字段只能编辑而不是所有其他字段？

解

结束使用。（）prev如下所示：http://jsfiddle.net/1yncv6rf/3/

$(document).ready(function(){
    var editable=1;
    $(".edit-btn").click(function(){
         if(editable == 1){
             $(this).prev().attr('contenteditable','true');
             return editable=2;
         } else if(editable == 2) {
              $(this).prev().attr('contenteditable','false');
              return editable=1;
         }
    });
});

Answer 1

您可以使用jQuery.prev()：

$(document).ready(function(){
    editing=false;
    c = $(".edit-url");
    b = $(".edit-btn").click(function(){
        var elementToEdit = $(this).prev();
        switch(editing){
            case true:
            elementToEdit.contentEditable = true;
            elementToEdit.css({background:"#eeeeee"});
            editing=false;
        break;
        case false:
            elementToEdit.contentEditable = false;
            elementToEdit.css({background:"white"});
            editing=true;
        break;
    });
});

Answer 2

我更喜欢你对$（this）选择器jquery做一点研究，它只会抓取cilcked按钮，然后使用jquery.previous找到相对的$（“。edit-url”）DOM对象。

动态获取前一个元素，然后在jQuery中单击

2 个答案: