Question

出于某种原因，只有编辑点击时出现了保存按钮...不确定为什么我的取消按钮出现问题...？以下是我的代码

$(".editlink").on("click", function(e){
    e.preventDefault();
      var dataset = $(this).prev(".datainfo");
      var savebtn = $(this).next(".savebtn");
      var cancelbtn = $(this).next(".cancelbtn");

      $(this).css("display", "none");
      cancelbtn.css("display", "block");
      savebtn.css("display", "block");     
});

这是我的整个HTML页面：

<div id="wrapper">
  <section id="core">
      <div class="profileinfo">

          <div class="gear">
              <label>Primary E-Mail:</label>
              <span id="email_address" class="datainfo"><?php echo $row['email_address'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>First Name:</label>
              <span id="first_name" class="datainfo"><?php echo $row['first_name'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>Last Name:</label>
              <span id="last_name" class="datainfo"><?php echo $row['last_name'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>About Me:</label>
              <span id="about_me" class="datainfo"><?php echo $row['about_me'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>

          <div class="gear">
              <label>Interests:</label>
              <span id="interests" class="datainfo"><?php echo $row['interests'] ?></span>
              <a href="#" class="editlink">Edit Info</a>
              <a class="savebtn">Save</a>
              <a class="cancelbtn">Cancel</a>
          </div>
      </div>
  </section>

出于某种原因，我尝试的一切都没有奏效。我可以使用一个标签/字段，但是当我的html中有多个像上面这样的时候，取消按钮会出现。

Answer 1

next()，如jQuery文档：

中所述

获取该组中每个元素的紧跟兄弟 匹配的元素。如果提供了选择器，它将检索下一个选择器兄弟姐妹只有匹配那个选择器。

尝试使用siblings()

Answer 2

您可以尝试这样的事情：

var cancelbtn = $(this).parent().find('a.cancelbtn');

See working example

$（this）.next（）的问题

2 个答案: