私はこのようなものを持っています:
<div class="content">
<a href="#">A</a>
</div>
<div class="content">
<a href="#">B</a>
</div>
<div class="content">
<a href="#">C</a>
</div>
これらのリンクのいずれかをクリックすると、クリックされていないリンクに対して.hide()関数を実行したいと思います。 jQueryには:notセレクターがあることは理解していますが、この場合の使用方法はわかりません$(".content a")
を使用してリンクを選択する必要があるため
私は次のようなことをしたい
$(".content a").click(function()
{
$(".content a:not(this)").hide("slow");
});
しかし、この場合、:notセレクターを適切に使用する方法がわかりません。
not()
selector の代わりに :not()
method を使用してみてください。
$(".content a").click(function() {
$(".content a").not(this).hide("slow");
});
JQueryの.siblings()
メソッドを使用することもできます。
HTML
<div class="content">
<a href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
</div>
Javascript
$(".content").on('click', 'a', function(e) {
e.preventDefault();
$(this).siblings().hide('slow');
});
「siblings()」メソッドを使用し、その効果を適用するためだけに「.content a」セレクターを繰り返し実行しないようにする必要があります。
HTML
<div class="content">
<a href="#">A</a>
</div>
<div class="content">
<a href="#">B</a>
</div>
<div class="content">
<a href="#">C</a>
</div>
CSS
.content {
background-color:red;
margin:10px;
}
.content.other {
background-color:yellow;
}
Javascript
$(".content a").click(function() {
var current = $(this).parent();
current.removeClass('other')
.siblings()
.addClass('other');
});
こちらをご覧ください: http://jsfiddle.net/3bzLV/1/