0

ユーザー選択の結果として表示される4つのリスト項目があります。ユーザーがこれらの項目の1つをクリックすると、クラスが「.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');
});

キーアップコンポーネントも必要だったのは知っていますが、それをどのように組み込むかはわかりません。どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

1

更新しました

セレクターの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 に答える