Question

在下面，您可以看到我拥有div 0、1、2的card bg-dark text-white类data-index，此后，我又有了div类{{ 1}}及其over-menu active 0、1、2

到目前为止，我还没有尝试过任何东西，因为我没有怎么做。

data-index

下一个要实现的是：当我单击<div class="card bg-dark text-white" data-index="0"> <div class="card bg-dark text-white" data-index="1"> <div class="card bg-dark text-white" data-index="2"> <div class="over-menu active" data-index="0"> <div class="over-menu active" data-index="1"> <div class="over-menu active" data-index="2">为0的div类card bg-dark text-white来打开data-index类div时， over-menu active为0，与data-index为1，2，...

时相同

下面是代码，您能告诉我如何实现吗？

Answer 1

单击card div时，您可以从单击的div中找到数据值，然后在over-menu div上进行迭代以找到具有相应数据的div值：

$('.card').click(function(){
  var _val = $(this).data('index');
  $('.over-menu').each(function(){
     if (_val === $(this).data('index')){
       //do something
      }
  });
});

Answer 2

您可以做类似的事情

$('.card bg-dark.text-white').click (function (){
  var elem = $('.over-menu.active').find($(this).data('index'));
 // do what you need with elem
 });

Answer 3

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .over-menu , .active{
            display: none;
        }
        .card{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="card bg-dark text-white" data-index="0" onclick="fun1();">click me 1</div>
    <div class="card bg-dark text-white" data-index="1" onclick="fun2();">click me 2</div>
    <div class="card bg-dark text-white" data-index="2" onclick="fun3();">click me 3</div>

    <div class="over-menu active" data-index="0" id="1">1</div>
    <div class="over-menu active" data-index="1" id="2">2</div>
    <div class="over-menu active" data-index="2" id="3">3</div>
    <script>
        function fun1() {
            document.getElementById("1").style.display = "block";
            document.getElementById("2").style.display = "none";
            document.getElementById("3").style.display = "none";
        }
        function fun2() {
            document.getElementById("1").style.display = "none";
            document.getElementById("2").style.display = "block";
            document.getElementById("3").style.display = "none";
        }
        function fun3() {
            document.getElementById("1").style.display = "none";
            document.getElementById("2").style.display = "none";
            document.getElementById("3").style.display = "block";
        }
    </script>
</body>

Answer 4

使用纯 JavaScript ，您可以使用Document.querySelectorAll() 获取具有其 data-index 属性的所有元素。

示例：

var elems = document.querySelectorAll("div[data-index]");

您可以使用Document.querySelector()获得特定元素。

示例：

var target = document.querySelector("div[data-index=\"" + index + "\"].over-menu");

您可以使用HTMLElement.dataset获取 data-index 属性的当前值。

示例：

var index = element.target.dataset.index;

类似这样的东西：

window.onload = function() {
  (function() {
    var elems = document.querySelectorAll("div[data-index]"), len = elems.length, div;

    for (var i = 0; i < len; i++) {
      div = elems[i];
      div.onclick = clickAction;
    }

    function clickAction(e) {
      var index = e.target.dataset.index, target = document.querySelector("div[data-index=\"" + index + "\"].over-menu");
      resetSelectedElements();
      target.classList.add("selected");
    }

    function resetSelectedElements() {
      var targetElements = document.getElementsByClassName("over-menu"), len = targetElements.length, targetElement;

      for (var i = 0; i < len; i++) {
        targetElement = targetElements[i];
        targetElement.classList.remove("selected");
      }
    }
  }());
};

.card.bg-dark.text-white,
.over-menu.active {
  margin: 5px;
  padding: 8px;
}

.card.bg-dark.text-white {
  background-color: #f00;
  color: #fff;
  cursor: pointer;
  display: block;
}

.over-menu.active {
  background-color: #ccc;
  color: inherit;
  display: none;
}

.over-menu.active.selected {
  border: #0a0 solid 5px;
  display: block;
}

<div class="card bg-dark text-white" data-index="0">Index: 0</div>
<div class="card bg-dark text-white" data-index="1">Index: 1</div>
<div class="card bg-dark text-white" data-index="2">Index: 2</div>
<hr />
<div class="over-menu active" data-index="0">Index: 0</div>
<div class="over-menu active" data-index="1">Index: 1</div>
<div class="over-menu active" data-index="2">Index: 2</div>

在此演示中，我有一种CSS样式，可以在选择div时显示适当的内容。

.over-menu.active.selected {
  border: #0A0 solid 5px;
  display: block;
}

Answer 5

以下代码可根据需要运行，.over-menu { display: none; } .over-menu.selected { display: inherit; }是可选的，但以下几行除外：

// Add click event to all cards
$(".card").click( function() {

  // Remove previous selection
  $(".selected").removeClass("selected");
  
  // Get data-index from clicked .card
  var dataIndex = $(this).attr("data-index");
  
  // Add selected class to corresponding over-menu
  $(".over-menu[data-index=" + dataIndex + "]").addClass("selected");
  
  // Add selected class to the card 
  $(this).addClass("selected");
  
});

所有其他CSS只是为了帮助演示用户体验。

我已经注释了代码的每一行，以解释正在发生的事情。

让我知道您是否还需要其他东西。

.card, .over-menu {
  width: 50px;
  height: 50px;
  float: left;
  border-radius: 5px;
  background: black;
  color: white;
  text-align: center;
  font-size: 30px;
  line-height: 50px;
  margin: 5px;
}

.card.selected {
  background: blue;
}

.over-menu {
  display: none;
}

.over-menu.selected {
  display: inherit;
}

.full-width {
  width: 100%;
  height: 60px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label>Card components:</label>

<div class="full-width">
  <div class="card bg-dark text-white" data-index="0">0</div>
  <div class="card bg-dark text-white" data-index="1">1</div>
  <div class="card bg-dark text-white" data-index="2">2</div>
</div>

<hr>

<label>Over-menu components:</label>
<div class="full-width">
  <div class="over-menu active" data-index="0">0</div>
  <div class="over-menu active" data-index="1">1</div>
  <div class="over-menu active" data-index="2">2</div>
</div>

.ConfigureAwait(false)

单击时，打开另一个具有相同数据索引的div

5 个答案: