0

我有四个列表项显示为用户选择的结果。当用户单击其中一项时，类从“.xx”更改为“.yy”（更改背景颜色）。我在最后一个 li 之外还有许多文本输入框。当输入框有焦点和/或框中有文本时，我希望能够将最后一个 li 的类从 .xx 更改为 .yy 。如果没有文本或焦点，则将 li 类更改回 .xx。

这是HTML：

<li class="xx lastitem">
    </li>

<span class="iknow-form">
   <input type="text" class="iknow-input" name="entry_name">
   <input type="text" class="iknow-input" name="entry_street">
   <input type="text" class="iknow-input" name="entry_city">
   <input type="text" class="iknow-input" name="entry_state">
</span>

我尝试了一些不同的东西，但似乎没有任何效果。

$('input.iknow-input').bind('focus blur', function () {
    $(this).find('.lastitem').toggleClass('yy').toggleClass('xx');
});

我知道还必须有一些 keyup 组件，但我不确定如何合并它。任何帮助将非常感激。谢谢！

4

2 回答 2

1

更新

我在其中一个选择器中错过了一个句点。我还稍微整理了一下代码。这确实有效。我知道我上次说过，但是大声笑。我又检查了一遍。

CSS：

<style type="text/css">
  .yy {
    background-color:#FFC;
  }
</style>

HTML：

<ul>
  <li class="xx lastitem">
  </li>
</ul>

<span class="iknow-form">
   <input type="text" class="iknow-input" name="entry_name">
   <input type="text" class="iknow-input" name="entry_street">
   <input type="text" class="iknow-input" name="entry_city">
   <input type="text" class="iknow-input" name="entry_state">
</span>

jQuery：

$(function(){

    $('input.iknow-input').focus(function(){
        turnOn();
    });

    $('input.iknow-input').blur(function(){

        $("input.iknow-input").each(function(){
            if ($(this).val() != ""){
                $(this).addClass("hasText");
            }
            else {
                if ($(this).hasClass("hasText")){
                    $(this).removeClass("hasText");
                }
            }
        });

        if ($(".iknow-input.hasText").length){
            turnOn();
        }
        else {
            turnOff();
        }

    });

    function turnOn(){
        $(".lastitem").removeClass("xx");
        $(".lastitem").addClass("yy");
    }
    function turnOff(){
        $(".lastitem").removeClass("yy");
        $(".lastitem").addClass("xx");
    }

});
于 2013-02-25T16:55:53.717 回答
0

应该

$('.lastitem').toggleClass('yy').toggleClass('xx');

代替

$(this).find('.lastitem').toggleClass('yy').toggleClass('xx');
于 2013-02-25T16:51:29.337 回答