Question

我有以下代码：

<div class="question">
 <span class="text_area>
  <textarea name="text1" id="response1" rows="3" cols="50"/>
 </span>
<div>
<div class="questionRespond">
 <input type="checkbox" name="chk_1"/>
  <span>
   <input class="questionbutton" id=send1Button/>
  </span>
</div>
<div class="question">
 <span class="text_area>
  <textarea name="text1" id="response1" rows="3" cols="50"/>
 </span>
<div>
<div class="questionRespond">
 <input type="checkbox" name="chk_2"/>
  <span>
   <input class="questionbutton" id=send1Button/>
  </span>
</div>
<div class="question">
 <span class="text_area>
  <textarea name="text2" id="response3" rows="3" cols="50"/>
 </span>
<div>
<div class="questionRespond">
 <input type="checkbox" name="chk_3"/>
  <span>
   <input class="questionbutton" id=send3Button/>
  </span>
</div>

基本上它是texarea，下面有一个复选框和按钮。我希望复选框和按钮仅在用户单击textarea时显示。这可以在jQuery中完成吗？

Answer 1

首先要确保隐藏的元素最初是隐藏的，因为显然没有人点击textarea。然后你想要一个点击处理程序附加到所有textareas，并显示复选框和按钮。

// Initially hide controls (should be better done without JavaScript)
jQuery('.questionRespond').hide();

// Handle the clicks
jQuery('.question textarea').click(function(){
    // this points to the textarea, look for the question div first, then the following response controls
    var respondControls = jQuery(this).closest('.question').next();
    respondControls.show();
});

请记住修复HTML，因为您正在重复标识符并省略引号。

Answer 2

最初用css隐藏questionRespond类，然后跟随jquery将显示div

    $('.text_area textarea').click(function(){
         $(this).closest('.question').next().show();
    })

Answer 3

试试这个

$(document).ready(function(){

 $(".questionRespond").hide();

  $("textarea").each(function(){
      $(this).click(function(){

        var qrcontainer = $(this).closest(".question").next(".questionRespond");
        qrcontainer.show();


   });
});

Answer 4

你可以使用焦点

$(document).ready(function(){
$('.questionRespond').hide();

$('textarea').focus(function(){
   $(this).closest('div. question').next('div.questionRespond').show();
}
);
});

Answer 5

// make questionRespond display:none
<div class="questionRespond" style="display:none">

// this will show the divs on clicking textarea
$('textarea').focus(function(){

      jQuery(this).closest('.question').find('.questionRespond').show();       
})


// this function will hide divs when you leave that textarea
$('textarea').blur(function(){

      jQuery(this).closest('.question').find('.questionRespond').hide();       
})

jQuery show click on click textarea

5 个答案: