なし要素にクラスを追加します。その 'クルーアイテム'の親ですが、私はどのようにバニラjsまたはjQueryを使用してそれを達成するための考えがありません。 目的は、アクティブなクラスを親に追加して、「クルーの詳細」の部分を明らかにすることです。 jQueryのを使用しては、私が項目のリストを持っているID
0
A
答えて
0
:このように
$('.crew-grid').click(function() {
$(this).closest('.crew-item').addClass('active');
});
1
がクリックされた要素から始めて、基本的に
$('.crew-grid').on('click', function() {
$(this).closest('.crew-item').addClass('active');
});
?:、セレクタと一致する最も近い祖先要素を取得します。要素をターゲットにする場合は、id
は必要ありません。これは、情報(この場合はクリックされた要素)に基づいて要素を識別するためのものです。あなたは、同時に他の要素非アクティブにする場合
は:
$('.crew-grid').on('click', function() {
$('.crew-item').removeClass('active');
$(this).closest('.crew-item').addClass('active');
});
0
使用に役立つと説明のためDocument.querySelectorAll()
var crews = document.querySelectorAll('.crew-item');
if (crews) {
for (var i = 0; i < crews.length; i++) {
var grid = crews[i].querySelector('.crew-grid');
grid.addEventListener('click', toggleActive, false);
}
}
function toggleActive() {
var grids = document.querySelectorAll('.crew-item');
for (var i = 0; i < grids.length; i++) {
if (grids[i].classList.contains('active')) {
grids[i].classList.remove('active');
}
}
this.parentNode.classList.add('active');
}
.crew-item.active {
background: #DDD;
}
.crew-grid:hover {
cursor: pointer;
background: #eee;
}
<div class="crew-item active">
<div class="crew-grid">crew-grid</div>
<div class="crew-detail">crew-detail</div>
</div>
<br>
<div class="crew-item">
<div class="crew-grid">crew-grid</div>
<div class="crew-detail">crew-detail</div>
</div>
<br>
<div class="crew-item">
<div class="crew-grid">crew-grid</div>
<div class="crew-detail">crew-detail</div>
</div>
+0
助けてくれてありがとう、私は要素を選択する方法が混乱していた。あなたのソリューションもすばらしく働いていて、jQueryをロードできない –
関連する問題
- 1. は私が項目のリストを持っている
- 2. CSSは、私が項目のリストを持っているアップ&ダウンアニメーション
- 3. 私が項目のリストを持っているリストイオン2
- 4. JqueryUIダイアログは、私が項目のリストを持っている古いターゲットインスタンス
- 5. 私はそうのような項目のリストを持っているインデックス
- 6. performItemClickは、私が持っているその項目
- 7. LINQは、私は3コレクションを持っているEACN項目
- 8. 私はリストを持って、リストで選択した項目からMVCアプリケーションで
- 9. 私がツリービューを持っているツリービュー選択した項目
- 10. のSharePoint:私はリストにリスト項目を挿入するいくつかのコードを持っているリスト項目
- 11. は、私はこのスクリプトを持っている2番目のリスト項目jQueryのオートコンプリート
- 12. 私は次のリストを持っている固有のID
- 13. 項目は、私は、セットアップの下に持っていますホストグループ
- 14. 私がリストを持っているリスト
- 15. jQueryのは、私はこのようなリスト持っているリスト項目の最初の文字
- 16. EventToCommand項目はこれは私がXAMLで持っているレイアウトでのItemsControl
- 17. は、私はこのコードを持って選択した項目
- 18. ドロップダウン項目のアンドロイドは、私は、コードのこの部分を持っている
- 19. CSSは、私は以下の項目を含むHTMLリストを持っている要素は、外
- 20. は、個別または私は以下の項目のリストを持っている
- 21. jQueryのは、私は次のマークアップを持つ親リスト項目
- 22. 項目はローカルスコープを持って
- 23. マウスで画面項目の順序を移動すると、私は項目の単純なリストを持っている私の画面で
- 24. 項目は、私はif文でこの条件を持っている辞書
- 25. は、私は次のシナリオを持っているポココード生成項目
- 26. タブ項目の変更Opaticyは、私は、データバインドタブコントロールを持っている
- 27. SwiftyJSON項目は、私は、次のダミーJSONデータを持っている
- 28. C#リストに項目がTTLを持つ
- 29. 選択/選択解除し、すべてのチェックボックス要素は、私がチェックボックスとAngularJS内の項目のリストを持っていると私はすべての項目を選択することができますチェックボックスを持っている
- 30. のPython、リストdictsは、私がdictsのリストを持っている
感謝をターゲットにする方法を、私は混乱していました要素、今私は知っている、素晴らしい仕事! –