2

td のクラスが「nee」の場合、jQuery でクリックをシミュレートしようとしています。どういうわけか、トリガーのようなすべてのオプションと、ドキュメントの準備が整ったクリックが機能しません...

HTML:

<td align="center" class="one nee">
   <img class="img-swap" src="images/nee.png" alt="Aanwezigheid"/>
</td>

トリガー アクション:

    $(document).ready(function(){ 
          $('#some-id').trigger('click'); 
    });

HTMLが返す画像は変数で、標準値は「ja.png」です。しかし、データベースで項目が no に設定されるとすぐに、画像は nee.png に変わります。しかし、それがトリガーされたときに、ja.png をクリックして nee.png に変更したときに表示されるのと同じように、入力フィールドが表示されるようにします。フェードイン付きです。別々に動作します。しかし、クリックをシミュレートすることはできません。

画像変更コード:

        $(document).ready(function(){
          $(".img-swap").click("click", function() {
            if ($(this).attr("class") == "img-swap") {
              this.src = this.src.replace("ja","nee");
            } else {
              this.src = this.src.replace("nee","ja");
            }
            $(this).toggleClass("ja");
          });
         });

フェードイン アクションのコード:

        $(document).ready(function(){       
            $(".nee").trigger("click");
            $("td.one").click("click", function(){
                
                if ($(this).parent().find("td.two, td.three").hasClass("toggled")){
                    $(this).parent().find("td.two").fadeOut(400);
                    $(this).parent().find("td.three").fadeOut(400);
                    $(this).parent().find("td.two").removeClass("toggled");
                    $(this).parent().find("td.three").removeClass("toggled");
                    
                } else {
                    
                    if ($(this).parent().find("td.three").hasClass("DoNotWant")){
                        $(this).parent().find("td.three").fadeOut(400);
                        $(this).parent().find("td.three").toggleClass("DoNotWant");
                    } else {
                        $(this).parent().find("td.three").fadeIn(400);
                        $(this).parent().find("td.three").toggleClass("toggled");
                    }
                    
                    $(this).parent().find("td.two").fadeIn(400);
                    $(this).parent().find("td.two").toggleClass("toggled");
                }                   
            });
            
            $("td.two").click("click", function(){
                
                if ($(this).parent().find("td.three").hasClass("toggled")){
                    $(this).parent().find("td.three").fadeOut(400);
                    $(this).parent().find("td.three").removeClass("toggled");
                    $(this).parent().find("td.three").toggleClass("DoNotWant");
                    
                } else { 
                    $(this).parent().find("td.three").fadeIn(400);
                    $(this).parent().find("td.three").toggleClass("toggled");
                    
                }
            });             
        });

私を助けることができる人はいますか？

実際の例はこちら: http://bryan.limewebsolutions.nl/

4

2 に答える 2

1

クリックをトリガーする代わりに、callback-functionへの参照を保存し、その参照をクリックイベントコールバックとして使用してから、iを個別に呼び出す方が簡単だと思います。イベントをクリックします。このようなもの：

var callback = function(){  
    if ($(this).parent().find("td.two, td.three").hasClass("toggled")){
        $(this).parent().find("td.two").fadeOut(400);
        $(this).parent().find("td.three").fadeOut(400);
        $(this).parent().find("td.two").removeClass("toggled");
        $(this).parent().find("td.three").removeClass("toggled");

    } else {

        if ($(this).parent().find("td.three").hasClass("DoNotWant")){
            $(this).parent().find("td.three").fadeOut(400);
            $(this).parent().find("td.three").toggleClass("DoNotWant");
        } else {
            $(this).parent().find("td.three").fadeIn(400);
            $(this).parent().find("td.three").toggleClass("toggled");
        }

        $(this).parent().find("td.two").fadeIn(400);
        $(this).parent().find("td.two").toggleClass("toggled");
    }                   
};

// Bind the click event
$("td.one").click("click", callback);
$(function () {
   // Instead of triggering a click, just call the function
   callback();
});

この例td.twoでは、例を簡単にするために、のコールバックは省略されています。

サイドノート：

  1. ifステートメントのセレクターに一致するtdが複数ある場合は、ここでのロジックに問題があると思います。その場合、一致する最初の要素は、クラスがあるかどうかをチェックするときに常に使用されtoggledます。.hasClass()一致した要素のセットの最初の要素を評価します。

  2. DOMトラバースを少なくすることで、コードをより効率的にすることができます。$(this).parent()コールバックで、親への参照を変数に保存し、毎回呼び出す代わりにその変数を使用します。

于 2012-10-08T08:42:46.317 に答える
1

.click()は のショートカットな.bind('click')ので、関数にイベント タイプ ( ) を指定する必要はありませんclick。

に変更する.click("click", function(){と.click(function(){、トリガーが適切に機能するはずです。

于 2012-10-08T08:45:51.510 に答える