Question

我希望在关键时改变可折叠1 的颜色，或者在txt1，txt2上键入可折叠2

<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 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" class="required"/>
                <input type="text" name="txt2" id="txt2" class="required"/>
              </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" class="required"/>
              <input type="text" name="txt4" class="required"/>
              <input type="text" name="txt5" class="required"/>
              <input type="text" name="txt6"/>
            </div>
          </section>

        </div>
      </div>
    </div>

    </div>

我已经尝试但是它不在这里工作是我的代码，我怎么能这样做？

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

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

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

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

                        collapseOne = 1;
                    }
                }
            });

            if ( collapseOne  == 1 ){
            $("h4").find("a").css("color","green");

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

Answer 1

您正在检查：

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

$(this)在这里引用带有类required

的输入元素

但是，在HTML标记中，您没有使用类required输入任何内容，请尝试添加：

<input type="text" name="txt1" id="txt1" class="required" />

<强> Fiddle Demo

如果您想根据以下输入定位H4，您可以使用：

$(this).closest('#collapseOne').siblings('.panel-heading').find('h4 a').css("color","green");

这里不需要if条件

<强> Updated Fiddle

好的，这是最终解决方案：

var collapseOne = 0;

$('#collapseOne input[type=text]').keyup(function (e) {
    var h4Text = $(this).closest('#collapseOne').siblings('.panel-heading').find('h4 a');
    $('#collapseOne  input[type=text]').each(function () {
        if ($(this).hasClass('required')) {

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

                collapseOne = 1;
            } else {
                collapseOne = 0;
            }
        }
    });

    if (collapseOne == 1) {
        h4Text.css("color", "green");
    } else {
        h4Text.css("color", "")
    }


});

<强> Updated Fiddle

Jquery通过输入改变颜色[type = text] keydown不工作

1 个答案: