0

現在、3列のドキュメントがあります。各列のフッターには、段落テキストの色を変更するカラーチェンジャーがあります。これはかなり単純だと確信していますが、現時点では親divの色のみを変更する必要がありますページ上のすべてのパラメータを変更します。

コード：

$('a.text_blue').click(function() {
    $('p').removeAttr('class').addClass('blue_text');   
});
$('a.text_red').click(function() {
    $('p').removeAttr('class').addClass('red_text');    
});
$('a.text_black').click(function() {
    $('p').removeAttr('class').addClass('black_text');  
});

HTML は次のようになります。

<div class="colour_changer">
        <a href="#" class="text_blue"></a>
        <a href="#" class="text_red"></a>
        <a href="#" class="text_black"></a>
</div>

CSSを見る必要がある場合はお知らせください。

前もって感謝します。

4

4 に答える 4

3

説明コメントに続いて、要素の兄弟である要素siblingsを取得するために使用できます。それの音によって彼らは親を共有するので、これはうまくいくはずです：pa

$('a.text_blue').click(function() {
    $(this).siblings('p').removeAttr('class').addClass('blue_text');   
});

質問のマークアップを減らしたが、それらが実際には兄弟ではない場合は、parentに移動してからdiv、find子孫p要素を取得するために使用できます。

$('a.text_blue').click(function() {
    $(this).parent().find('p').removeAttr('class').addClass('blue_text');   
});

aちなみに、コードを書き直して、各要素に個別のイベントハンドラーをバインドする必要がないようにすることもできます。あなたはこのようなことをすることができます：

<a href="#" data-class="blue-text"></a>

次に、イベントハンドラーを委任します。

$(".color_changer").on("click", "a", function() {
    $(this).parent().find("p").removeAttr("class").addClass($(this).data("class"));
});

アップデート

あなたがあなたのコードへのリンクを投稿したので、私はあなたに決定的な答えを与えることができます！pターゲットにする必要のある要素は、親の兄弟divです。

$('a.text_blue').click(function() {
    $(this).parent().siblings('p').removeAttr('class').addClass('blue_text');   
});

delegateまた、jQuery 1.6を使用しているため、次のメソッドを使用してイベントの委任を利用できます。

$(".color_changer").delegate("a", "click", function() {
    $(this).parent().siblings('p').removeAttr("class").addClass($(this).data("class"));
});
于 2012-06-12T13:55:58.187 に答える
1

これは、ページ内のすべての段落を参照しているためです。必要な段落にIDを付けて選択するだけです

   $('#yourparagraph').removeAttr('class').addClass('red_text');

または、クラスを使用できます

     $('.yourclass').removeAttr('class').addClass('red_text');

ニーズに応じて異なります。

ただし、あなたの問題はあまり明確ではありません。これは、あなたが望むものとは異なる可能性があります。

タグをコードに追加する必要がありますが、一般的には、コードを適用する要素を jQuery に伝える必要があります。単純に p タグを書くと、ページ全体に影響します。

于 2012-06-12T13:52:10.723 に答える
0 
$('p')

ページ上のすべての<p>タグを参照するための省略形です。

このようにid属性を変更する要素を指定する必要があります

<p id="iWantThisToChangeColors">

次のように、そのIDだけを参照するようにコードを変更します。

$('a.text_blue').click(function() {
     $('#iWantThisToChangeColors').removeAttr('class').addClass('blue_text');   
});

要素内のテキストの色のような単純なものを変更したり、カラーチェンジャーリンクをエコーアウトしたりするためのはるかに効率的な方法がありますが、これにより、現在のコードをあまり変更する必要がなくなります。

于 2012-06-12T13:58:49.797 に答える
0

あなたのJSでは、クリックイベントをすべての段落にバインドしています

$('p').removeAttr('class').addClass('red_text');

これは、ページ上のすべての p 要素を取得しています (つまり、すべての div のすべての p)。

各親 div に ID を指定し、イベント ハンドラーを変更して親 div の段落のみを変更します。たとえば、#div_1、#div_2、および #div_3 の 3 つの div ID を指定したとします。

$("#div_1 p").removAttr('class').addClass('red_text');
于 2012-06-12T13:54:01.297 に答える