Question

我正在研究项目，并且遇到了JS。请在阅读文字之前看到图片。 Picture

我想制作一个滑块（我做了），现在当我点击一个圆圈时，我想只显示相同颜色的内容框，其他的应该被隐藏。

e.g。当我点击.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为红色的元素才会显示。

与你的其他课程相同;

如何在img上单击，只显示一个，并隐藏其他div

3 个答案: