jquery - 单击其他 div 时隐藏/显示 Div

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");
} );

这是 fiddle ，如果有人可以帮忙的话。

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>