变量等于 jQuery 对象

Posted

技术标签:

【中文标题】变量等于 jQuery 对象【英文标题】：Variable equal to a jQuery object 【发布时间】：2020-04-04 00:38:36 【问题描述】：

我有 3 个跨度如下：

dot1 = $('#loading-dots-1');
dot1.delay(500, function() 
  dot1.show(500);
);
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text 
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;


.loading-dots 
  opacity: 0;

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>

看到了吗？ jQuery 没有.show(500) 元素，因为我使用了dot1。如果我直接使用以下内容，它将显示所需的输出（在“加载”之后立即显示点）。

$('#loading-dots-1').delay(500, function() 
  dot1.show(500);
);

我将如何使用变量dot1 来做同样的事情？

【问题讨论】：

var dot1 = $('#loading-dots-1'); 第二个例子也不起作用：jsfiddle.net/hLougmbz opacity 设置为 0； show() 只影响display。 @HereticMonkey 嗯！看来我犯了一个严重的错误...... 【参考方案1】：

几件事。 delay() 函数更改显示属性，而不是不透明度，因此您必须在默认状态下给点一个 display:none。其次，delay() 不将回调函数作为参数。相反，您需要将show() 链接到它。

let dot1 = $('#loading-dots-1');
dot1.delay(500).show(500);
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text 
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;


.loading-dots 
  display:none;

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>

【讨论】：

【参考方案2】：

首先，您需要更改loading-dots 类以使用显示，因为.show() 方法会更改元素的显示属性。

第二个.delay() 函数不接受函数作为第二个参数（它是字符串类型）。您可以像这样简单地链接 jquery 效果： $('#loading-dots-1').delay(500).show(500);

下面是一些修改过的代码，希望这能回答你的问题。

const dot1 = $('#loading-dots-1');
dot1.delay(500).show(500);
const dot2 = $('#loading-dots-2');
dot2.delay(1000).show(500);
const dot3 = $('#loading-dots-3');
dot3.delay(1500).show(500);
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text 
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;


.loading-dots 
  display: none;

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</body>

</html>

【讨论】：

是的。我认为即使对象的不透明度设置为 0，jQuery 也会认为对象是隐藏的。谢谢！【参考方案3】：

我会将settimeout 与show 一起使用。 而且你的第一个例子应该工作，它没有工作，因为你有opacity: 0;它应该是display:none 见下文

var dots = $(".loading-dots")
var index = -1;
function loading()

if (index == dots.length -1)
   
     index=0;
     dots.hide();
   else index++;
   $(dots[index]).show(500, function()
    setTimeout(loading,501)
   );
  


loading()
@import url('https://fonts.googleapis.com/css?family=Montserrat:300i,400,600&display=swap');

.main-text 
  width: calc(100%);
  padding: 0;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 6vw;
  color: #000;
  text-align: center;


.loading-dots 
  display:none;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!--Here's my doubt-->
  <div id="preloader-text" class="main-text">
    <p>Loading
      <span id="loading-dots-1" class="loading-dots">.</span>
      <span id="loading-dots-2" class="loading-dots">.</span>
      <span id="loading-dots-3" class="loading-dots">.</span>
    </p>
  </div>

  <!--Don't mind me, I'm just jQuery-->

【讨论】：

其实点的好方法。我使用 switch case 来解决我无法定义 jQuery 对象数组的想法。非常感谢！

以上是关于变量等于 jQuery 对象的主要内容，如果未能解决你的问题，请参考以下文章

在 jQuery 属性等于值选择器中使用变量作为值

JavaScript变量等于jQuery选择器创建开始和结束标记。为什么？

js中“[]”和“”的区别是啥？

jquery对象 赋值给变量 变量调用jquery方法，这能行吗

JQuery 插件，Javascript - 如何仅为 JQuery 插件全局变量或 json 对象创建并在函数级别更改此（变量、对象）

jqeury源码之变量解析