我有兩個元素都具有相同的類.one。單擊此按鈕并顯示類.A。其中一個元素的資料 ID 為two. 單擊此按鈕并顯示類.B。
但是，由于第二個“按鈕”也有類.one，它同時顯示.A和.B。
我怎么能說.B 只有當按鈕有時才執行這個功能/顯示.one and .two？
https://jsfiddle.net/tdo6cz7p/
$('.one').on('click', function() {
$('.A').show();
});
$("[data-id='two'].one").on('click', function() {
$('.B').show();
});.one {
width: 50px;
margin: 10px;
padding: 10px 0;
text-align: center;
outline: 1px solid black
}
.A,
.B {
display: none;
background: yellow;
width: 50px;
margin: 10px;
padding: 10px 0;
text-align: center;
outline: 1px solid black
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>
<div class="A">A</div>
<div class="B">B</div>uj5u.com熱心網友回復：
只需像這樣使用:not選擇器：
$('.one:not([data-id="two"])').on('click', function() {
$('.A').show();
});
$("[data-id='two'].one").on('click', function() {
$('.B').show();
});.one {width: 50px;margin: 10px;padding: 10px 0;text-align: center;outline: 1px solid black}
.A, .B {display: none;background: yellow;width: 50px;margin: 10px;padding: 10px 0;text-align: center;outline: 1px solid black}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>
<div class="A">A</div>
<div class="B">B</div>uj5u.com熱心網友回復：
單擊任何一個時，將其更改為接受一個或另一個$('.one')：
$('.one').on('click', function() {
if ($(this).data('id')) {
$('.B').show();
} else {
$('.A').show();
}
});
if ($(this).data('id')) {...
// if the `data-id` has a value ex. "2", then it is true
$('.one').on('click', function() {
if ($(this).data('id')) {
$('.B').show();
} else {
$('.A').show();
}
});.one {
width: 50px;
margin: 10px;
padding: 10px 0;
text-align: center;
outline: 1px solid black
}
.A,
.B {
display: none;
background: yellow;
width: 50px;
margin: 10px;
padding: 10px 0;
text-align: center;
outline: 1px solid black
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>
<div class="A">A</div>
<div class="B">B</div>uj5u.com熱心網友回復：
JQuery 選擇器等于querySelectorAll，而querySelector只選擇它找到的第一個元素：
document.querySelector(".one").onclick = function() {
$('.A').show();
}
$("[data-id='two'].one").on('click', function() {
$('.B').show();
});.one {
width: 50px;
margin: 10px;
padding: 10px 0;
text-align: center;
outline: 1px solid black
}
.A,
.B {
display: none;
background: yellow;
width: 50px;
margin: 10px;
padding: 10px 0;
text-align: center;
outline: 1px solid black
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">one</div>
<div data-id="two" class="one">two one</div>
<div class="A">A</div>
<div class="B">B</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/479689.html
標籤：javascript html jQuery css
上一篇：如何將.nextElementSibling應用于下拉選單的下一項
下一篇：使特定的彈性專案拉伸