Question

单击每个项目div时，如何将活动类添加到相应的信息div中。因此，点击食物，显示食物的信息窗口。所有其他都是隐藏的等等。在我的项目中，我的信息div不是DOM中的下一个东西，因为它嵌套在另一个地方。我已经看过数据 - *但是'数据 - 知道如何使用它。

<div class="item">Food</div>
<div class="item">Music</div>
<div class="item">Transport</div>

<div class="info active">
    <h2>All about Food</h2>
    <p>Food is by far the best invention</p>
</div>

<div class="info">
    <h2>All about Music</h2>
    <p>Music is the best</p>
</div>

<div class="info">
    <h2>All about Transport</h2>
    <p>Cars, planes & trains</p>
</div>

我只有下面的所有内容。

$(function() {
    $('.item').on('click', function() {
        $('.info').addClass('active');
    });
});

Answer 1

一个选项是向您的元素添加数据属性，并使用它们将您的项目绑定到相应的信息div：

$('.item').click(function() {
  $('.info').removeClass('active');
  $('.info[data-info="' + $(this).data('item') + '"]').addClass('active');
})

.info.active {
  display: block;
}

.info {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-item="food" class="item">Food</div>
<div data-item="music" class="item">Music</div>
<div data-item="transport" class="item">Transport</div>

<div data-info="food" class="info active">
  <h2>All about Food</h2>
  <p>Food is by far the best invention</p>
</div>

<div data-info="music" class="info">
  <h2>All about Music</h2>
  <p>Music is the best</p>
</div>

<div data-info="transport" class="info">
  <h2>All about Transport</h2>
  <p>Cars, planes & trains</p>
</div>

Answer 2

<div class="item" data-showid="food">Food</div>
<div class="item" data-showid="music">Music</div>
<div class="item" data-showid="transport">Transport</div>

<div class="info" id="food">
    <h2>All about Food</h2>
    <p>Food is by far the best invention</p>
</div>

<div class="info" id="music">
    <h2>All about Music</h2>
    <p>Music is the best</p>
</div>

<div class="info" id="transport">
    <h2>All about Transport</h2>
    <p>Cars, planes & trains</p>
</div>

JS

$(document).ready(function(){
 $(document).on("click",".item", function(){
   $(".info").hide();
   $("div#"+$(this).attr("data-showid")).show();
 });
});

您可以使用此脚本。首先隐藏所有信息div，然后使用data-showid属性显示相关的div。

Answer 3

你可以这样做：

$(function() {
  $('.item').on('click', function() {
    $(".info.active").add('#' + $(this).attr('data-id')).toggleClass('active');
  });
});

<强>演示

$(function() {
  $('.item').on('click', function() {
    $(".info.active").add('#' + $(this).attr('data-id')).toggleClass('active');
  });
});

.info {
  display: none
}

.info.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item" data-id="Food">Food</div>
<div class="item" data-id="Music">Music</div>
<div class="item" data-id="Transport">Transport</div>

<div id="Food" class="info active">
  <h2>All about Food</h2>
  <p>Food is by far the best invention</p>
</div>

<div id="Music" class="info">
  <h2>All about Music</h2>
  <p>Music is the best</p>
</div>

<div id="Transport" class="info">
  <h2>All about Transport</h2>
  <p>Cars, planes & trains</p>
</div>

如何使用JQuery显示相应的div并隐藏其他div？

3 个答案:

JS