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

【问题标题】：Dynamically get previous element then clicked in jQuery动态获取前一个元素，然后在 jQuery 中单击
【发布时间】：2014-09-23 19:29:01
【问题描述】：

我有一个链接和按钮列表，其中包含使用 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 函数，当按下“编辑”按钮时会触发，所以我可以编辑链接的文本并通过 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;
  }
}

以前（在我为每个类名添加唯一标识符之前）当我单击 any 按钮时，它使所有“.edit-url”链接都可编辑，但我没有'不希望所有字段都可编辑，我只希望每个按钮左侧的字段可编辑（即只有一个字段）。

我想知道的是，如何向我的选择器添加通配符/变量，以便当我单击“edit-btn-V7Ma8Olb”时，它会使“edit-url-V7Ma8Olb”字段可编辑仅而不是所有其他字段？

解决方案

最终使用 .()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;
         }
    });
});

【问题讨论】：

你为什么不用jQuery.prev()？

标签： javascript php jquery html

【解决方案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;
    });
});

【讨论】：

谢谢，我最终使用了 .prev() 好主意！我的解决方案在上面的编辑中。

【解决方案2】：

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

【讨论】：