Question

大家好，我们的目标是拥有一堆标志，当您单击每个标志时，它将显示一个与之对应的列表。我的代码如下。

现在看来它似乎不起作用，我猜是因为我在jQuery上很糟糕。

$('.canadaflag').click( function() {
    $(".canadalocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.usaflag').click( function() {
    $(".usalocations").toggleClass("viewlocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.colombiaflag').click( function() {
    $(".colombialocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.guatemalaflag').click( function() {
    $(".guatemalalocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.peruflag').click( function() {
    $(".perulocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
} );

如果有人可以帮助，这是小提琴。

https://jsfiddle.net/isaacflyingsquirrel/x74zq5mL/

Answer 1

Working fiddle 。

您可以使用data-*属性来实现，就像：

$('.flagwrapper div').click(function() {
  var flag = $(this).attr('class');

  $('.flag').hide();
  $('div[data-location="' + flag + '"]').show();
});

.canadaflag {
  background-color: orange;
  width: 20px;
  height: 20px;
}

.usaflag {
  background-color: red;
  width: 20px;
  height: 20px;
}

.colombiaflag {
  background-color: green;
  width: 20px;
  height: 20px;
}

.peruflag {
  background-color: yellow;
  width: 20px;
  height: 20px;
}

.guatemalaflag {
  background-color: purple;
  width: 20px;
  height: 20px;
}

.flag {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flagwrapper">
  <div class="canadaflag"></div>
  <div class="usaflag"></div>
  <div class="colombiaflag"></div>
  <div class="peruflag"></div>
  <div class="guatemalaflag"></div>
</div>

<div class="flag canadalocations" data-location="canadaflag">
  <p class="plocation">North Calgary</p>
  <p class="plocation">South Calgary</p>
  <p class="plocation">Hamilton</p>
  <p class="plocation">London</p>
  <p class="plocation">Ottawa</p>
  <p class="plocation">Victoria</p>
  <p class="plocation">Winnipeg</p>
</div>

<div class="flag usalocations" data-location="usaflag">
  <p class="plocation">Missoula</p>
  <p class="plocation">Lutz</p>
  <p class="plocation">Bozeman</p>
  <p class="plocation">Kansas City</p>
</div>

<div class="flag guatemalalocations" data-location="guatemalaflag">
  <p class="plocation">Guatemala City</p>
</div>

<div class="flag colombialocations" data-location="colombiaflag">
  <p class="plocation">Medellin</p>
  <p class="plocation">Cali</p>
  <p class="plocation">Bucaramanga</p>
  <p class="plocation">Bogota</p>
  <p class="plocation">Baranquilla</p>
  <p class="plocation">Ibague</p>
</div>

<div class="flag perulocations" data-location="peruflag">
  <p class="plocation">Lima</p>
</div>

Answer 2

您似乎没有导入jquery，所以它不起作用，单击javascript标签，然后单击frameworks＆extensions，向下滚动并查找jquery，然后再次单击run。应该可以的。
也不要使用切换类，而是使用show（）/ hide（）代替

$('.peruflag').click( function() {
    $(".perulocations").show();
    $(".usalocations").hide();
    $(".canadalocations").hide();
    $(".colombialocations").hide();
    $(".guatemalalocations").hide();
} );

基本上是.toggleClass（“ viewlocationlist”）;到.show（）和.toggleClass（“ hidelocationlist”）;到.hide（）

单击其他div时隐藏/显示div

2 个答案: