0

出于某种原因，只有保存按钮显示在编辑单击上...不知道为什么我的取消按钮有问题...？下面是我的代码 

$(".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 中有多个类似上面的内容时，会显示取消按钮。

4

2 回答 2

7

next()如 jQuery Docs 中所述：

获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

尝试使用siblings()

于 2012-08-22T00:11:55.093 回答
0

你可以尝试这样的事情：

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

查看工作示例

于 2012-08-22T01:02:07.957 回答