隐藏< p>并显示< textarea>在< a>点击 [英] Hiding the <p> and showing the <textarea> on a <a> click

问题描述

我知道标题听起来很容易，但真正的问题是标记。我有一个链接在一个div，也在另一个div，但textarea和段落在另一个div，这就是为什么我有问题，如何显示和隐藏元素在一个完全不同的标记div与完全不同的标记div。 / p>

我看见 .parent（） 和 .children（） 和 .siblings（） 。但他们不能帮助我，或者我认为我不能帮助那些。

这里是 fiddle 。

这是我试过的JS：

  $（。no_link）click（function（e）{
 e.preventDefault（）; 
}）; 
 $（。edit_offer）。on（'click'，function（）{
 $（this）.parent（）。parent（）。siblings（）。children（textarea）。 toggle（）; 
}）; 
  

解决方案

您可以使用这些选择器， username 在您的代码中处于层次结构中：

  $（。edit_offer）。on（'click'，function（）{
 $（this）.closest（'。username'）。find（textarea）。toggle b}）; 
  

jsFiddle示例

.closest（）将遍历DOM直到它碰到类 username 的元素，然后 .find（）将通过孩子们寻找的是textarea。

I know the title sounds quite easy but the real problem is the markup. I have a link in a div which also in another div but the textarea and the paragraph are in another div so that's why I am having problem on how to show and hide elements in a completely different markuped div from a completely different markuped div.

I saw .parent() and .children() and .siblings(). But they couldn't help me or I think that I was not able to take help of those.

Here's the fiddle.

Here is the JS I tried:

$(".no_link").click(function(e) {
    e.preventDefault();
});
$(".edit_offer").on('click', function() {
    $(this).parent().parent().siblings().children("textarea").toggle();
});

解决方案

You can use these selectors, but it will rely on the class username being in the heirarchy as you have in your code:

$(".edit_offer").on('click', function () {
    $(this).closest('.username').find("textarea").toggle();
});

jsFiddle example

.closest() will traverse up the DOM until it hits the element with class username, then .find() will go down through the children looking for the textarea.

这篇关于隐藏< p>并显示< textarea>在< a>点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！