Question

我让自己感到困惑与遍历。

我正在尝试显示编辑链接和一些文字。可以选择添加/编辑文本（textarea）。

1）如果文本为空，则文本＆＃34; panel＆＃34;将被隐藏，单击相应的编辑链接将显示一个空文本区域字段 2）如果有文本，将显示包含文本的面板。单击此相应的编辑链接还将显示文本区域字段（已填充）。

$(function () {
$('.myLink').show();
$(".showText").each(function () {
    if (!$.trim($(this).html()) == '') {
        $('.panel').hide();
        $('.showText').hide();
        $('.editText').hide();
    } else {
        $('.panel').show();
        $('.showText').show();
        $('.editText').hide();
    }
});
$('.myLink').click(function () {
    $(this).closest('tr').next().slideToggle("fast");
    // $('.panel').closest().show();
    // $('.showText').closest().hide();
    // $('.editText').closest().show();
});});

<table border="1">
<tr class="topinfo">
    <td>
        <p class="myLink">EDIT</p>
    </td>
</tr>
<tr class="panel">
    <td>
        <div class="showText">
            Hello World
        </div>
        <div class="editText">
            <textarea>Hello World</textarea>
        </div>
    </td>
</tr>
<tr class="topinfo">
    <td>
        <p class="myLink">EDIT</p>
    </td>
</tr>
<tr class="panel">
    <td>
        <div class="showText">
        </div>
        <div class="editText">
            <textarea></textarea>
        </div>
    </td>
</tr>

我没有正确穿越。

http://jsfiddle.net/nope_four/hgp0hdxe/

感谢。

Answer 1

你在寻找像

这样的东西吗？

＆＃13;

$(function() {
  $('.myLink').show();
  $('.editText').hide();
  $(".showText").filter(function() {
    return $.trim($(this).html()) == ''
  }).closest('.panel').addClass('empty');
  $('.myLink').click(function() {
    var $this = $(this),
      $panel = $(this).closest('tr').next().toggleClass('edit'),
      isEdit = $panel.hasClass('edit');
    if ($panel.hasClass('empty')) {
      if (isEdit) {
        $panel.slideDown();
      } else {
        $panel.slideUp();
      }
    }
    $panel.find('.showText').toggle(!isEdit);
    $panel.find('.editText').toggle(isEdit);
  });
});

＆＃13;

.editText {
  display: none;
}
.panel.empty {
  display: none;
}
.panel.empty .showText {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
  <tr class="topinfo">
    <td>
      <p class="myLink">Link</p>
    </td>
  </tr>
  <tr class="panel">
    <td>
      <div class="showText">Hello World</div>
      <div class="editText">
        <textarea>Hello World</textarea>
      </div>
    </td>
  </tr>
  <tr class="topinfo">
    <td>
      <p class="myLink">Link</p>
    </td>
  </tr>
  <tr class="panel">
    <td>
      <div class="showText"></div>
      <div class="editText">
        <textarea></textarea>
      </div>
    </td>
  </tr>
</table>

＆＃13;

主要问题是您的选择器，您定位所有.panel元素，而不是仅定位与当前链接相关的面板。

Answer 2

工作示例

http://codepen.io/anon/pen/WbQyvb

HTML

<div class="title">Link
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Sed at tincidunt urna. Quisque vitae ipsum
      sed purus suscipit lobortis eget luctus nulla. 
      Aenean vel euismod tortor. In nec eleifend diam
      et pellentesque lorem. Aliquam condimentum a enim
      et suscipit. Suspendisse sit amet elit 
      condimentum, consectetur dolor non, mollis nibh
    </p>
  </div>
</div>
<div class="title">Link
  <div class="content">
    <p></p>
  </div>
</div>

CSS

.title {
  font-weight: bold;
  font-size: 2em;
  border: 1px solid black;
  width: 50%;
  padding: 0.5em;
  cursor: pointer;
  display: block;
  margin: 1em;
}

.content {
  font-size: 0.5em;
  font-weight: normal;
  border-top: 1px solid black;
}

textarea {
  margin: 1em !important;
}

脚本

var content = $(".content");
var title = $(".title");

content.hide();

title.click(function() {
  $(this).children(".content").toggle();
  if( $(this).find('div.content p').is(":empty") ) {
    $(this).find('p').replaceWith('<textarea></textarea>');
    $(this).find('textarea').click(function(event){
      event.stopPropagation()
    });
  }
});

JQuery Show Hide＆amp;遍历

2 个答案: