1

我想做一些事情：

  1. <textarea>扩展<div>框时的焦点。
  2. <div>展开新框时折叠先前打开的框
  3. 单击“编辑”链接时，文本将进入<textarea>要编辑的位置。所以我需要一种方法来使用 jQuery 将字符串放入<textarea>或自动扩展<div>以显示<textarea>其中的字符串以对其进行编辑。

由于我以前的问题，我已经展开/折叠工作：展开/折叠 div

内容由 PHP / MySQL 生成。

这是我的小提琴：http: //jsfiddle.net/Draven/kUhkP/85/

抱歉，如果我遗漏了任何重要信息，如果我想到应该添加的内容，我会编辑这篇文章。

更多关于#3

单击“编辑”链接时，页面“刷新”（它是同一页面，但 URL 更改）并且他们想要编辑的内容现在显示在<textarea>框中。当页面更改时，它会显示所有<div>框都折叠的页面。

我需要自动扩展<div>其中的可编辑内容。<textarea>

有没有办法检查是否<textarea>有内容然后<div>扩展？

4

2 回答 2

2

试试这个：

$(document).on('click', '.postreply', function(e) {
    $(this).closest('.blogcontainer').siblings('.blogcontainer').find('.postreplycontainer').slideUp("fast");
    $(this).closest('.blogcontainer').find('.postreplycontainer').slideToggle("fast")
        .find('textarea[name=replycontents]').focus();
});

在这里，我使用一个事件来处理$(document).on所有元素，包括现在和未来（动态）。请记住，如果您曾经使用过 jQuery *pre*1.7，那么您只需更改为. 既然是委托，一度似乎是合适的，然而，时代变了。现在，如果您愿意，您仍然可以使用“.delegate”。jQuery 已经注意到它们没有“弃用”，也没有打算删除. 他们只是觉得1.7 中的实现被取代了，因此他们推荐用于委托。delegate.on.delegate.delegate.delegate.on.delegate.on

如您所见，使用委托形式.on非常简单。规则很简单。$(selector)应该是“存在 onload”的“父”元素，或者您可以简单地使用$(document).

您的.on参数同样简单。第一个参数是event您要分配的字符串名称。请记住，您可以只用一个空格来分配多个事件；exp 'change keydown'（这是 textareas 的流行事件分配）。

第二个参数与任何其他 jQuery 选择器一样。请记住，将分配满足要求的所有元素。所以类似的东西'div'会将一个事件分配给所有 div 元素。

最后是“回调”方法。e当然代表传入的那个event Object。例如e.target在函数中与$(this)

至于#3

如果您每次都重新加载页面，那么只需找到第一个包含内容的文本区域并下拉其父容器。这仅仅意味着添加一行简单的代码：

$('.blogcontainer textarea[name=replycontents]').filter(function(i) { return $.trim($(this).val()) != ""; }).closest('.postreplycontainer').slideDown("fast");

把它分解一些：

  • $('.blogcontainer textarea[name=replycontents]'): 我想你现在已经了解了选择器，但请注意，记住，你可以使用“任何”CSS 选择器作为 jQuery 选择器。
  • .filter(function(i) { return $.trim($(this).val()) != ""; })：这个方便的小 jQuery 方法允许我们根据给定的回调“过滤”“选择”的结果。
    • (i)代表索引，从0 开始。
    • 我在这里使用的返回方法“修剪”文本区域的值，从而删除尾随和前导空格。- 因此，一个只有空格的文本区域将返回错误。- 您可能需要编辑此回报以满足您的需求。
    • 阅读更多：http ://api.jquery.com/filter/
  • .closest('.postreplycontainer')：只需抓取与选择器匹配的最近的父元素。
    • 为什么我们现在需要父母？好吧，我们找到了带有内容的文本区域，现在我们需要扩展父级。
    • 请记住，虽然多个文本区域可能有内容，但一旦我们将其添加到链中，我们只会获得第一个具有内容的父项
  • .slideDown("fast");： 最后，。通过向下滑动带有内容的盒子来关闭链条！

在这里看小提琴！请记住，我不会“重新加载”页面或任何东西。但是通过在那里设置线条，第一个带有内容的框总是会向下滑动。如果不希望这样做，您可能需要考虑使用jQuery 的 Ajax来编辑框。

于 2013-06-26T12:54:51.880 回答
1 
$("a.postreply").click(function () {
    $('.postreplycontainer').hide();
    $(this).closest('.blogcontainer').find('.postreplycontainer').slideToggle("fast");
    //$('.replycontents').blur();
    $(this).closest('.blogcontainer').find('.replycontents').focus();
});

照顾1和2。我不明白第三点。

于 2013-06-26T12:52:56.523 回答