質問
私はそのような構造を持っています:
<div id="slider">
<div id="nav">
<div class="sliderPart">
<a href="#computers">
<strong>1</strong>
</a>
</div>
<div class="sliderPart">
<a href="#network">
<strong>2</strong>
</a>
</div>
<div class="sliderPart">
<a href="#web">
<strong>3</strong>
</a>
</div>
<div class="sliderPart">
<a href="#support">
<strong>4</strong>
</a>
</div>
</div>
<div id="slider-content">
<a href="#computers" id="slider-computers" class="slider-block">Test1</a>
<a href="#network" id="slider-network" class="slider-block">Test 2</a>
<a href="#web" id="slider-web" class="slider-block">Test 3</a>
<a href="#support" id="slider-support" class="slider-block">Test 4</a>
</div>
</div>
ここで、「」のクリックを処理する必要があります。ナビ' そして 'スライダーコンテンツ' クリックされた要素の href-attribute を取得します。
$('#slider').click(function(){
console.log( $(this) );
});
このコードを使用すると、
[ディビジョン#スライダー]
解決
使用 attr
要素の属性値を取得または設定するには:
$('#slider a').click(function(){
console.log( $(this).attr('href') );
});
セレクター #slider
div 要素を参照しているため、firebug は出力されます。 [div#slider]
. 。を使用して、その中のアンカーをターゲットにできます。 祖先子孫 セレクタ:
「祖先」によって指定された要素の「子孫」によって指定されたすべての子孫要素と一致します。
これは、上の例のように、子孫要素を祖先要素の後にスペースで区切って配置することを意味します。 $('#slider a')
参考までに、VER 1.6 時点 .prop() が導入されました。 より詳しい情報
属性とプロパティの違いは、特定の状況において重要となる場合があります。jQuery 1.6 より前では、.attr() メソッドは一部の属性を取得するときにプロパティ値を考慮することがありました。これにより、一貫性のない動作が発生する可能性がありました。jQuery 1.6 では、.prop() メソッドはプロパティ値を明示的に取得する方法を提供し、.attr() は属性を取得します。 より詳しい情報
たとえば、selectedIndex、tagName、nodeName、nodeType、ownerDocument、defaultChecked、defaultSelected は、.prop() メソッドを使用して取得および設定する必要があります。jQuery 1.6 より前では、これらのプロパティは .attr() メソッドで取得できましたが、これは attr の範囲内ではありませんでした。これらには対応する属性はなく、単なるプロパティです。 より詳しい情報