ネストされた要素は、親クラスを削除しません。
-
19-09-2019 - |
質問
クラスは、それがクリックされることにより<li>
に設定されています。今、ネストされた要素(<button>
)は、その親からクラスを削除しません。
事前に感謝します。
$(document).ready(function() {
$('.pickOne li').click(function() {
$(this).addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});
とHTMLはそうのようなものです。
<div class="fromCamp pickOne four">
<ul class="four">
<li class="first bus"><a href="#" alt="By Bus"></a>
<div>
<p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
<li class="second car"><a href="#" alt="By Car"></a>
<div>
<p><a href="#">Remoras</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
<li class="third plane"><a href="#" alt="By Plane"></a>
<div>
<p class="cmInfo">Arrive between 9 AM and 11 AM. Read these <a href="#">additional instructions</a>. <a href="#">Driving Directions</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
<li class="fourth stayOver"><a href="#" alt="Staying Over"></a>
<div>
<p><a href="#">Remoras</a></p>
<p><a href="#">Tilefishes</a></p>
<p><a href="#">Bluefishes</a></p>
<p><a href="#">Tigerfishes</a></p>
<button class="cmCancelDeleteButton settingsCancelBtn" type="button">Cancel</button>
<button class="cmGoButton settingsSaveBtn" type="button">Save</button>
</div>
</li>
</ul>
</div>
<div class="cmClear"></div>
</div>
解決
さて、ここで何が起こっているのかいます:
あなたがボタンをクリックすると、は、LIに含まれている中で、あなたのボタンは、それがクラスを削除するので、その後、イベントが伝播し続け、クラスを再適用します。
だから、削除されます。そのだけで瞬時に再適用します。だから、追加
// Dont forget to put the e in function()
$('.settingsCancelBtn').click(function(e) {
$(this).parent().parent().removeClass('active');
// This is the new line!
e.stopPropagation();
});
他のヒント
だから、私はこの投稿分後に、私の相棒は、解決策を提示しています。知っていたポイントを...ブレイク。 :)
私はアクティブなクラスを削除するには、それの子をクリックしたとき、私は最初に、<li>
を選択したため、、それを除去し、その後すぐに再びそれを追加しました。
ソリューションは、当初<a>
(<li>
に設定され、display:block
が行うのと同じスペースをカバーしています。)
li
を選択するようにしました
愚かな私。
$(document).ready(function() {
$('.pickOne li a ').click(function() {
$(this).parent().addClass('active');
});
$('.settingsCancelBtn').click(function() {
$(this).parent().parent().removeClass('active');
});
});
所属していません StackOverflow