如何在img上單擊，僅顯示一個並隱藏其他div

Question

我正在從事項目，並且陷入了JS的困境。 在閱讀文字之前，請先查看圖片。 圖片

我想制作一個滑塊（我確實做了），現在當我單擊一個圓時，我只想顯示具有相同顏色的內容框，而其他的則應隱藏。

例如，當我單擊.imgRed時，我只希望顯示#red，而其他則顯示#blue和#black display: none; 。

謝謝。

Answer 1

您可能知道應該做些什么，但對它沒有信心。 您應該隱藏其他人，但您要留下來。
例如，對於紅色，您應該這樣做：

$('.imgRed').click(function() {
    $('#red').show();
    $('#black').hide();
    $('#blue').hide();
}

並重復其他所有步驟。

Answer 2

我嘗試根據使用的圖片創建一個有效的代碼段：

• 圈子的一類，酒吧的一類，
• 圓圈具有data-color屬性，該屬性將定位單擊時顯示的條。

這里是：

 // When clicking a circle, use the data-colo to display the correct bar $('.circle').click(function() { $('.bar').hide(); var color = $(this).data('color'); $('#' + color).show(); }); // Trigger the click event on load: $('.imgRed').trigger('click'); 

 .circle { display: inline-block; margin: 8px 16px; border: 30px solid; border-radius: 50%; height: 0; width: 0; } .bar { display: none; margin: 8px 16px; height: 40px; width: 250px; } .imgRed { border-color: red; background-color: red; } .imgBlack { border-color: black; background-color: black; } .imgBlue { border-color: blue; background-color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="circle imgRed" data-color="red"></div> <div class="circle imgBlack" data-color="black"></div> <div class="circle imgBlue" data-color="blue"></div> <br><br> <div class="bar imgRed" id="red"></div> <div class="bar imgBlack" id="black"></div> <div class="bar imgBlue" id="blue"></div> 

希望能幫助到你。

Answer 3

$('.imgRed').click(function(){
    $('#red').show();
    $('#blue,#black').hide();
});

現在，當您單擊所有具有.imgRed類的元素時，只有那些具有ID紅色的元素才可見。

與其他課程相同