Change color by Jquery keydown,Keyup

Question

I have some html and i am willing to change the font colour of h4 tag by keydown or keyup example; when i keydown id="txt1",id="txt2" the font colour change to be green

<h4 class="panel-title">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
    Collapsible Group Item #3
  </a>
</h4>

similarly for all panel how i can do this? thanks

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        <section>
          <div class="section_inner">
            <input type="text" name="txt1" id="txt1"/>
            <input type="text" name="txt2" id="txt2"/>
          </div>
        </section>
      </div>
    </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <section>
            <div class="section_inner">
              <input type="text" name="txt3"/>
              <input type="text" name="txt4"/>
              <input type="text" name="txt5"/>
              <input type="text" name="txt6"/>
            </div>
          </section>

        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            Collapsible Group Item #3
          </a>
        </h4>
      </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        <section>
          <div class="section_inner">
            <input type="text" name="txt7"/>
            <input type="text" name="txt8"/>
            <input type="text" name="txt9"/>
            <input type="text" name="txt10"/>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>


<script>
    var collapseOne = 0;
    //collapseOne reqeried validation
    $('#collapseOne input[type=text]').keyup(function(){

        $('#collapseOne  input[type=text]').each(function(){

            if ( $(this).hasClass('required')  ){

                if ( $(this).val() != ''  ){

                    collapseOne = 1;
                }
            }
        });

        if ( collapseOne  == 1 ){
            //$(this).find("data-id='collapseOne'").css("color","green");
            //$(this).closest('.panel-heading h4').css("color","green");
        }

    });
</script>

Answer 1

try this:

$("body").keypress(function( event ) {
   if ( event.which == 40 || event.which == 38 ) {
      $("h4").find("a").css("color","green");
   }
});

or

$("body").keypress(function( event ) {
   if ( event.which == 40 || event.which == 38 ) {
      $("h4 > a").css("color","green");
   }
});

more info abyout keypress

Answer 2

If you want to change color of h4 then try this

$( "body" ).keydown(function() {
    $("h4").css("color","green");   
});

Answer 3

我想就是你想要的

$( "input" ).keydown(function(e) { $(e.target).closest("h4").css("color","green");
});