小编kaw*_*nah的帖子

请考虑以下内容：

{% for variant in product.variants %}
    {{ forloop.index }}<br>
    {{ unless forloop.last }}LAST<br>{{ endunless }}
{% endfor %}

根据shopify文档：

如果这是 for 循环的最后一次迭代，则返回 true。如果不是最后一次迭代，则返回 false。

上面代码的输出是：（对于 3 个变体）

1
LAST
2
LAST
3
LAST

为什么？变体对象与上下文中的其他对象不同吗forloop.last？

我需要获取一个JSON对象并记录标题控制台以获取自动完成功能.我的json的样子如下:

[
  {
    "title": "Example 1",
    "url": "http:\/\/www.example1.com\/"
  },
  {
    "title": "Example 2",
    "url": "http:\/\/www.example2.com\/"
  },
  {
    "title": "Example 3",
    "url": "http:\/\/www.example3.com\/"
  }, ...

我想在我的控制台中记录所有标题,如下所示:

Example 1
Example 2
Example 3

我最初尝试做我想要的是这样的:

$.ajax({
      type: "GET",
      dataType: 'json',
      url: "/url/to/json/",
      success: function(data) {
        var searchResults = JSON.parse(data);
        console.log(searchResults.title);
      },
    });

这返回:

在位置1的JSON中出现意外的令牌o

经过进一步的研究:

在位置1的JSON中出现意外的令牌o

SyntaxError:位置1的JSON中出现意外的标记o

使用$ .parseJSON()和JSON.parse()导致"Uncaught SyntaxError:Unexpected token o"的原因是什么

建议已经解析数据.所以我尝试直接调用对象,因为这些答案建议:

$.ajax({
      type: "GET",
      dataType: 'json',
      url: "/url/to/json/",
      success: function(data) {
        console.log(data.title);
      },
    });

这给了我:

未定义

如何在控制台中打印特定的JSON数据,在本例中为标题？如果已经解析了数据,那么当我尝试访问它时,它会返回undefined？

我只想在条件(特别是我的窗口大小)为真时触发函数.我的代码看起来像这样:

$(window).resize(function() {
    console.log("window resized");
    if ($(window).width() > 769) {
      $('.panel').hover(
        function() {
          $(this).children('.initial').addClass('hide');
          $(this).children('.hover').addClass('show');
        }, function() {
        $(this).children('.initial').removeClass('hide');
        $(this).children('.hover').removeClass('show');
      }
      );
    } else {
        return false;
    }
  });

该功能是一种悬停功能,可在悬停时隐藏面板.预期的行为/目标是,一旦我低于769像素,该功能将不会执行,当您悬停时,面板将保持可见.我试图通过回归false我的其他条件来做到这一点.

经过进一步的研究,return: false;类似于e.preventDefault();它可以防止发生默认操作以及冒泡的事件.

如何根据窗口大小阻止这些函数的触发？我的另一个问题是性能 - 可以看出,对于窗口调整大小的每个像素,函数都被触发了!

我已经检查过并试过JavaScript的变体允许各种函数只有在某些条件为真时才能执行但我没有发现它有用.

我想要一个围绕一个圆圈的圆形边框，它的内部有空白。

这是我尝试过的：

.status {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #2ed091;
    margin: 5px;
    border: 1px solid black;
}

<span class="status"></span>

如您所见，黑色正在接触绿色 - 他们不应该接触。

然后我研究并发现了CSS 外边框

.status {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #2ed091;
    padding: 15px;
    outline: 1px solid black;
}

<span class="status"></span>

但它作为一个盒子出现并且边界半径不适用。为什么？

然后我找到了另一个建议伪元素的答案

.status {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    background-color: #2ed091;
    padding: 15px;
}

.status:before {
  content: '';
  display: block;
  outline: 1px solid black;
  width: 87px;
  height: …

我有一个addEventListener箭头函数,点击一个按钮,它通过切换类来改变颜色.如下所示:

var clickButton = document.getElementById("clicker");

clickButton.addEventListener("click", => () {
  this.classList.toggle("modified");
}, false);

在我的控制台中:

未捕获的TypeError:无法在HTMLButtonElement中读取未定义的属性"classList".

它变得有趣的地方是将它转换为一个JS函数,如下所示:

var clickButton = document.getElementById("clicker");

clickButton.addEventListener("click", function() {
  this.classList.toggle("modified");
});

完美的工作.我不明白为什么arrow函数版本渲染classList undefined.

classListES6箭头的工作原理如何？

我在Vue组件中有一个庞大的数据列表,我想动态填充.我试图通过循环和全局变量来做到这一点.它看起来如下:

    var filterItems = document.querySelectorAll('.filter-title');
    var filterItemsTitle = filterItems.innerHTML;
    var arr = [];

    function buildContent() {
      for (var i = 0; i < filterItems.length; i++) {
        arr.push(filterItems[i].innerHTML);
      }
      console.log(arr)
    }

    window.onload = buildContent

    var titleFilter = new Vue({
      // in items its refering to arr built in buildContent
      el: '#filter',
      data: {
         // arr comes from buildContent() - I think...does this work?
         items: arr,
         filters: [
            { label: 'All Titles', value: false },
            { label: 'a', value: 'a' },
            { …

每次在输入字段中输入内容时,我想返回一个字符串.换句话说,每次按键时,我都希望在控制台中看到它被输入.所以在输入中输入堆栈,我想看到:

s
st
sta
stac
stack

我的初始代码是:

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

哪个是空白的.好的,让我们试试toString():

$("#input").on('input', function() {
    var userInput = $(this).text();
    console.log(userInput.toString());
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" id="input" placeholder="type">

结果相同.为什么？不toString()将数据类型转换为字符串,不应将其记录在控制台中.

为什么在第一个例子中没有toString()它不返回文本值？

http://api.jquery.com/text/ - 它说

.text()方法的结果是一个包含所有匹配元素的组合文本的字符串.

我错过了什么？这里发生了什么？

编辑:愚蠢的错误,我需要,.val();但这导致我另一个问题:

如果.text()返回一个字符串,控制台是否为空？

我正在做一个正则表达式检查有效的电子邮件函数，但我得到一个模糊的错误，它不是一个函数。

这些是我参考的答案：

一个简单的 jQuery 表单验证脚本

使用 jQuery 中的正则表达式验证电子邮件

JavaScript regexp 匹配可变电子邮件域

最后两个答案的基本要点是.test()针对电子邮件输入运行它。所以从我链接的第三个问题开始：

var userinput = 'dirk@something.com';
var domain = 'somethingelse.com';

var pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i
if(!pattern.test(userinput) || userinput.split('@')[1] != domain)
{
  alert('not a valid e-mailadres, or the wrong domain!');
}?

我接受了这个看似基本的前提并开始执行。

我的代码如下所示：

HTML：

<form action="/premium/sign-up/" method="POST" id="signupform">

    <div class="field">
        <input class="signup-form-input" type="text" name="name" id="signupform-name" >
        <label class="signup-form-input-label" for="name">Name</label>
    </div>
    <div class="field">
        <input class="signup-form-input" type="text" name="email" id="signupform-email" >
        <label class="signup-form-input-label" for="email">E-Mail</label>
    </div>
    <div class="field">
        <input class="signup-form-input" type="password" name="password" id="signupform-password" > …

考虑一下：

let arr = [\'hello\', \'hi\', \'ok\', \'this one\']\nlet varToAssign\n\nfunction assignTheVar() {\n    for(let i = 0; i < arr.length; i++) {\n    if(arr[i] == \'this one\') {\n        varToAssign = arr[i]\n      return\n    }\n    }\n  console.log(varToAssign)\n}\n\nwindow.addEventListener(\'load\', assignTheVar)

\n

该变量varToAssign不会被控制台记录。

这是为什么？

此问题的搜索结果

但这有效：

let arr = [\'hello\', \'hi\', \'ok\', \'this one\']\nlet varToAssign\n\nfunction assignTheVar() {\n    for(let i = 0; i < arr.length; i++) {\n    if(arr[i] == \'this one\') {\n        varToAssign …