Javascript Jquery通过输入[type=text]键更改颜色不起作用

当我在txt1上按向下键或向上键时，我想更改可折叠1的颜色，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>

您正在检查：

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

$（this）

这里指的是您的输入元素，类

必需

但是，在您的HTML标记中，您没有任何类

必需的输入

，请尝试添加：

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

无需

if

条件

---

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

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", "")
    }


});

---

请将代码放在小提琴中并发布URL。没有需要类

的元素，顺便说一句，您不是针对特定的H4，而是尝试使用此
$（'.panel-group-input[type=“text”]'）.keyup（function（）{if（$（this）.hasClass（'required'）&&$（this）.val（）！==''{$（this）.最近的（'.panel'）.find（'a'）.css({color:'green'}）；}else{$（this）.最近的（'.panel'）.find（'a'）.css（{color:'blue'}）；}}）；
我只想更改父项h4 Tag我已经更改了代码的颜色，但它同时更改了两个h4的颜色，我怎么能只更改父项的颜色呢？基本上，我愿意在所有字段都被填充后更改颜色，这就是我使用collapseOne==1的原因
$(this).closest('#collapseOne').siblings('.panel-heading').find('h4 a').css("color","green");

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", "")
    }


});