2016-07-09 9 views
0
$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").offsetParent().css("background-color", "red"); 
    }); 
}); 
ここ
<button>Set background-color</button> 
<div style="border:1px solid black;width:70%;position:absolute;left:10px;top:50px"> 
    <div style="border:1px solid black;margin:50px;background-color:yellow"> 
     <p>Click button to set the background color of the first positioned parent element of this paragraph.</p> 
    </div> 
</div> 

今まで私は、ボタンの背景色の赤をクリックが来るが、ときに私は再びその背景をクリックし、これまでされている場合、私は親を相殺するために、背景色をアプリングていますが、私はそれがあまりにもトグルを作りたいですトグル方法を使用して色を変更する必要がありますトグルjqueryのoffsetParentの()メソッド

+0

a)にインラインスタイルを使用しないでください。これを試してみてください。 b)あなたは今からCSSを使用することになるので、クリックして要素のクラスを切り替えて、クラスにスタイルを入れます。例:http://www.w3schools.com/jquery/html_toggleclass.asp – Roope

答えて

0

これを達成する最も簡単な方法は、自分自身のCSSクラスに追加/削除するスタイルを入れてからtoggleClass()を呼び出すことです。このようにして、HTMLとJSコード(つまり、別のスタイルシート)からあなたのスタイリングルールを守る方がずっと良い方法です。

.on { 
    background-color: red; 
} 
$("button").click(function() { 
    $("p").offsetParent().toggleClass('on') 
}); 

Working example