動的HTML属性の更新

Question

pは、div.testがリンクrelを正しく出力するように、pがクラス「継承」を継承することを試みます。

現在、ページがpタグに割り当てられたクラスなしで読み込まれた場合、そのページは読み込まれません。 pタグがクラス "active"を継承すると、div.testに出力されたリンクが正しく出力されます。

$(document).ready(function(){ 
    var relvar = $('p.active').attr('rel'); 
    $("div.test").html("<a rel='"+ relvar +"'>hello</a>"); 

    $("p").click(function() { 
    $(this).toggleClass("active"); 
    }); 

    }); 

Answer 1

あなたが何を求めているのかわかりません。あなたはこのコードをたいと言っている：<p>要素は、クラスを変更するたびに

var relvar = $('p.active').attr('rel'); 
$("div.test").html("<a rel='"+ relvar +"'>hello</a>"); 

を実行するには？もしそうなら、そのようには「onchangeclass」イベントか何かはありませんが、実際にこれを処理するために独自のイベントを作成することができます。

$('p').bind('toggleActive', function() { 
    if($(this).hasClass('active')) { 
     var relvar = $(this).attr('rel'); 
     $("div.test").html("<a rel='"+ relvar +"'>hello</a>");   
    } 
}).click(function() { 
    $(this).toggleClass('active').trigger('toggleActive'); 
}); 

Check this code in action。

これは実際にはラウンドアバウトのようなものです。クリックハンドラ自体でロジックを行うのが最も簡単です。独自のイベントに移動することの主な利点は、コード内の別の場所でこれを行う必要がある場合、そのロジックを分離しておき、必要に応じてトリガーすることができるということです。

Answer 2

これがあなたの目的であるかどうかは不明ですが、clickコードではそれを処理できませんか？

$(document).ready(function() { 
    $('p').click(function() { 
    $(this).toggleClass('active'); 

    if ($(this).hasClass('active')) { 
     relvar = $(this).attr('rel'); 

     $('div.test').html("<a rel='" + relvar + "'>hello</a>"); 
    } else { 
     $('div.test').html("<a>hello</a>"); 
    } 
    }); 
}); 

は、私の知る限りでは、あなたはそれがチェックし、それがdiv要素を更新する必要があるかどうかを確認するためには、いくつかのイベントにバインドする必要があります。