切换聚焦类/模糊

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

来源

2013-02-25 Mac10

请让我知道，如果我的解决方案为您... – derekmx271 2013-02-25 17:58:08

更新

我错过了在选择的一个时期。我也将代码放了一些。这确实有用。我知道我上次说过，但是哈哈。我再次检查。

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-25 16:55:53 derekmx271

好，而不是仅仅做这是我的头顶，我创建了一个文件（http://derekfoulk.com/files/toggle-on-focus-blur/index.html）。它工作正常。只需添加一些CSS来设置两个类的样式。 – derekmx271 2013-02-25 17:18:04

感谢您的详细解释！这是一个巨大的帮助，我很欣赏它 – Mac10 2013-02-25 18:08:01

应该

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

，而不是

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

来源

2013-02-25 16:51:29 Derek

切换聚焦类/模糊

回答

相关问题