Question

我已经在JavaScript中获得了一些代码，我希望将其转换为jQuery。我现在已经在网上浏览了几个小时，并试图自己解决这个问题，但没有成功。所以我来到这里。

    window.addEventListener('mouseup', function(event){
    var dp1 = document.getElementById('dp1');
    if(event.target != dp1 && event.target.parentNode != dp1){
        dp1.style.height = "0px";
        dp1.style.width = "0px";
    }
});

Answer 1

将代码转换为jQuery是没有意义的，这段代码更长，更慢并且具有很多依赖性：

$(window).on("mouseup", function(event) {
    var dp1 = $('#dp1');
    if(this != dp1.get(0) && $(this).parent().get(0) != dp1.get(0)){
        dp1.css("height", "0px");
        dp1.css("width", "0px");
    }
});

Answer 2

尝试使用以下代码。

$(document).mouseup(function(event){
    var dp1 = $('#dp1');
  if(event.target != dp1 && event.target.parentNode != dp1){
    dp1.css({height:'0px', width:'0px'});
  }
});

Answer 3

$(document).ready(function() {
  $(window).on("mouseup", function(event) {
    var dp1 = $("#dp1");
    var target = $(event.target); 

    if( !$(target).is(dp1) && !target.parents('#dp1').length) {
      dp1.css("height", "0").css("width", "0");
    }
  });
});

Answer 4

首先，jQuery为JavaScript。

大多数人都试图不在他们的项目中加载它，以降低它带来的开销，所以通常，请求与你所要求的相反。减少此开销的一种方法是以其精简形式加载jQuery。

但这并不是说jQuery都不好。

除了更短的语法，关于jQuery的特殊之处，它的最佳和最差特征，取决于你所看到的位置，它为JavaScript带来了很大的灵活性，这阻止了程序员理解js限制。这是有帮助的，但它是有约束力的。例如，在编写干净JavaScript之前，我从不需要学习闭包，因为jQuery会在需要时将它们静默地添加到我的构造中。

关于jQuery的一个明显积极的事情是它提供了一些怪癖和解决方法，可以解决一些不需要和不应该知道的浏览器不一致问题，就像autoprefixer取消大部分内容一样前缀为CSS的痛苦。

话虽如此，我认为这是代码的精简版本，jQuery。如果您已在项目中加载jQuery，则应该只使用它。恕我直言。

$(window).on('mouseup', function(e){
  if (! $(e.target).closest('#dp1').is('#dp1')) {
    $('#dp1').css({
      height: 0,
      width: 0
    })
  }
})

如何将这个JavaScript代码翻译成jQuery？

4 个答案: