Question

我有一些HTML，我愿意通过keydown或keyup更改h4标签的字体颜色例; 当我按下id="txt1",id="txt2"时，字体颜色变为绿色

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

同样对于所有小组我怎么能这样做？感谢

<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

试试这个：

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

或

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

更多信息abyout keypress

Answer 2

如果你想改变h4的颜色，那么试试这个

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

Answer 3

我认为这就是你想要的东西

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

通过Jquery keydown，Keyup改变颜色

3 个答案: