Question

我有四个列表项，显示为用户选择的结果。当用户单击其中一个项目时，该类将从“.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组件，但我不知道如何合并它。任何帮助将非常感激。谢谢！

Answer 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");
    }

});

Answer 2

应该是

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

而不是

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

在焦点/模糊上切换类

2 个答案: