Question

嗨，大家好，有人可以帮助我，我想在触发事件后显示隐藏的div显示，我在该div上删除鼠标这里是我的代码

<div id='MainContainer'>
  <div id='btn-img' onmouseover='DisplayHidden()'>content 1</div>
  <div id='container2'>content 2</div>
</div>

function DisplayHidden()
{
  $('#container2').show();
}

有可能吗？

Answer 1

我更喜欢这种方式，因为如果你想添加更多的属性和比较参数，你可以轻松添加它，属性绑定是动态的。

＆＃13;

    $(document).ready(function(){
        $("#MainContainer > div").on("click",function(e){      
            if(false === !!$(this).attr('data-click')){    	
                $(this).attr("data-click", true);
                alert('No');
            }else{        
                alert('Clicking on same div');
            }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='MainContainer'>
        <div id='container1'>content 1</div>
        <div id='container2'>content 2</div>
    </div>

＆＃13;

Answer 2

以下是您可以使用纯JavaScript进行的操作。

将click事件绑定到容器元素上，并使用event.target属性检查上一个click元素并采取适当的操作。

Event.target documentation on MDN

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
  var prevElement = null;
  document.querySelector("#MainContainer").addEventListener("click", function(event) {
    if (prevElement === event.target) {
      console.log("Yes")
    } else {
      console.log("No");
    }
    prevElement = event.target;
  });
});

＆＃13;

<div id='MainContainer'>
  <div id='container1'>content 1</div>
  <div id='container2'>content 2</div>
</div>

＆＃13;

Answer 3

var lastClick = null;

$('div#MainContainer div').click(function() {

    var clickedId = $(this).attr('id');

    if (clickedId == lastClick) {
        alert('Clicked the same div');
    }
    else {
        alert('Clicked on a different div'); 
        lastClick = clickedId;
    }
});

Answer 4

这是一个简单的解决方案，使用普通的javascript：

var g_lastTarget = null

var g_handleClick = function(e) {
  var target = e.currentTarget

  if (g_lastTarget === target) {
    alert('You clicked the container twice. Container ID = ' + target.id)
  }

  g_lastTarget = target
}

var c1 = document.getElementById('container1')
var c2 = document.getElementById('container2')

c1.addEventListener('click', g_handleClick)
c2.addEventListener('click', g_handleClick)

Answer 5

创建一个公共类＆amp;使用querySelectorAll选择所需的元素。

然后循环遍历它将eventListener方法附加到它。创建一个变量来存储当前单击元素的id。在随后的单击检查中，变量值和id是否相同。如果相同则抛出警报。

var getElements = document.querySelectorAll(".elem");
var clickedElem = "";
getElements.forEach(function(item) {
  item.addEventListener('click', function() {
    if (item.id === clickedElem) {
      alert('Clicking on same div')
    } else {
      clickedElem = item.id
    }

  })
})

<div id='MainContainer'>
  <div id='container1' class="elem">content 1</div>
  <div id='container2' class="elem">content 2</div>
</div>

鼠标移出或悬停后如何显示隐藏的div

5 个答案: