小编Jae*_*Lee的帖子

如何选择没有特定类的元素

我想知道如何使用JavaScipt选择没有特定类的元素,而不是jQuery.

例如,我有这个列表:

<ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

我通过以下方式选择完成的任务:

var completeTask = document.querySelector("li.completed.selected");
Run Code Online (Sandbox Code Playgroud)

但后来我不确定如何选择没有这些类的列表项.

html javascript class

71
推荐指数
4
解决办法
6万
查看次数

Wordpress pre_get_posts类别过滤器删除自定义菜单项

所以我有这个网站,你可以看到有两个菜单,一个在徽标旁边,另一个在右上方;

http://www.ducklingfarm.com

它们是在functions.php中使用此代码创建的;

function register_my_menus() {
register_nav_menus(
  array(
  'header-menu' => __( 'Header Menu' ),
  'extra-menu' => __( 'Extra Menu' )
)
 );
 }
add_action( 'init', 'register_my_menus' );
Run Code Online (Sandbox Code Playgroud)

这是我使用菜单的代码;

<nav>
<?php wp_nav_menu(array( 'theme_location' => 'header-menu' ) ) ?>
</nav>

<nav id="ecommerce">
<?php wp_nav_menu( array( 'theme_location' => 'extra-menu' ) ); ?>
</nav>
Run Code Online (Sandbox Code Playgroud)

菜单工作正常,除非您转到侧栏中的类别,例如"博客"页面上的"文章"或"活动";

http://www.ducklingfarm.com/blog/

博客页面是一个自定义的帖子类型,为了使类别工作,我在functions.php中添加了一些代码,从那时起菜单就无法正常工作.那段代码是;

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
if(is_category() || is_tag()) {
$post_type = get_query_var('post_type');
if($post_type)
    $post_type = $post_type;
else
    $post_type = array('post','Blog');
$query->set('post_type',$post_type);
return $query;
}
}
Run Code Online (Sandbox Code Playgroud)

所以我猜这个代码有问题.请帮我!我真的很感激.

最好的,Jaeeun …

html php wordpress

5
推荐指数
1
解决办法
2408
查看次数

彩色圆点:之前和之后:h2之后

我想在h2之前和之后放置彩色圆点.

这是我的CSS;

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}

h2:after {
 width:10px;
 height:10px;
 border-radius:50%;
 background: #b83b3b;
}
Run Code Online (Sandbox Code Playgroud)

但没有点出现.

任何线索?

谢谢!

Jaeeun

css pseudo-element

5
推荐指数
2
解决办法
2万
查看次数

垂直对齐块元素

我在div中有一个图像和文本彼此相邻.我试图将文本在中间垂直对齐,但它保持在顶部.请帮忙!

http://jsfiddle.net/9KDva/

HTML:

<div class="title-block">
  <div class="img-holder"><img width="101" height="104" src="http://www.girlsguidetomanners.com/wp-content/uploads/2014/02/url-16-101x104.jpeg" class="attachment-homepoststhumbnail wp-post-image" alt="url-16" /></div>
  <div class="title">Get Your Nose Out of Your IPhone</div>
</div>
Run Code Online (Sandbox Code Playgroud)

CSS:

.title-block {
width:272px;
height: 110px;
vertical-align:middle;
}

.img-holder {
float: left;
margin: 0 6px 0 0;
position: relative;
}

.img-holder img {
display: block;
}

.title {
display:block;
text-transform: uppercase;
margin: 8px 0 9px;
}
Run Code Online (Sandbox Code Playgroud)

css vertical-alignment

5
推荐指数
1
解决办法
2万
查看次数

从未排序的数组中查找缺失的数字

我发现这个JavaScript算法是专门的:

问题

从1到100(不包括一个数字)的未排序数字数组中,您将如何找到该数字?

作者提供的解决方案是:

function missingNumber(arr) {
    var n = arr.length + 1,
        sum = 0,
        expectedSum = n * (n + 1) / 2;

    for (var i = 0, len = arr.length; i < len; i++) {
        sum += arr[i];
    }

    return expectedSum - sum;
}
Run Code Online (Sandbox Code Playgroud)

我想尝试一下,以便找到多个遗漏的号码。

我的解决方案:

var someArr = [2, 5, 3, 1, 4, 7, 10, 15]

function findMissingNumbers(arr) {
    var missingNumbersCount;
    var missingNumbers = [];
    arr.sort(function(a, b) {
        return a - b;
    })  
    for(var i …
Run Code Online (Sandbox Code Playgroud)

javascript algorithm

5
推荐指数
1
解决办法
4742
查看次数

单元测试具有外部依赖性的ES6类

我正在尝试为我的公司设置单元测试样板.我们的前端项目使用ES6类构建,并且依赖于我们的核心产品.前端代码通过整个其他代码块中的构建过程进行封装,该代码块基本上是一个闭包并捕获依赖项.因此,我们不必手动导入它以便使用它.

假设依赖项被调用productScope,它是一个对象,它包含一些DOM模型,内部API和参数以及每个项目所需的许多其他内容.目前,摩卡投掷ReferenceError: productScope is not defined.我怎么能模仿这个对象?或者我应该只使用实际的对象?

例:

class someClass {
    constructor() {
        const id = productScope.items[0].id
        const item = productScope.domModel.querySelector('.some-div')

        item.classList.add(`added-${id}`)
    }
}
Run Code Online (Sandbox Code Playgroud)

这包含在核心代码中,如下所示:

(function(productScope) {
    // front end code goes here
}(productScope)
Run Code Online (Sandbox Code Playgroud)

测试文件:

import someClass from '../../js/someClass'

describe('someClass', function() {
    const someClass = new someClass()
    it('should be a class', function() {
        console.log(someClass)
    });
});
Run Code Online (Sandbox Code Playgroud)

javascript unit-testing mocking mocha.js

5
推荐指数
1
解决办法
458
查看次数

如何集中砌体容器

我正试图将一个砌筑容器放在页面上.此刻,它与左侧对齐.我的CSS中有margin auto,而JS中的isFitWidth:true,但似乎都没有做任何事情.我也尝试在我的CSS中放置display:block.

这是HTML;

<div id="masonry_container" class="group">

<div class="masonry_item">
    <a href="http://storyville.jonmarkoff.com/storyvillewp"target="_blank">
    <img src="images/storyville_home.png" alt="Storyville Entertainment"/>
    <h3>Storyville Entertainment</h3></a>
</div><!--masonry_item-->


<div class="masonry_item">
    <a href="http://www.ducklingfarm.com"target="_blank">
    <img src="images/udof_home.jpg" alt="Ugly Duckling Organic Farm"/>
    <h3>Ugly Duckling Organic Farm</h3></a>
</div> <!--masonry_item-->


<div class="masonry_item">
    <a href="http://www.underdonk.com"target="_blank">
    <img src="images/underdonk_home.png" alt="underdonk"/>
    <h3>Underdonk</h3></a>
</div> <!--masonry_item-->

<div class="masonry_item">
    <a href="http://www.jaeeunlee.com" target="_blank">
    <img src="images/jaeeunlee_home.png" alt="jaeeunlee"/>
    <h3>www.jaeeunlee.com</h3></a>
</div> <!--masonry_item-->

<div class="masonry_item">
    <img src="images/goindoor_hospitals.png" alt="goindoor"/>
    <h3>Goindoor</h3>
</div> <!--masonry_item-->

<div class="masonry_item">
    <img src="images/cakes_home.jpg" alt="wonderfully whimsical cakes"/>
    <h3>Wonderfully Whimsical Cakes</h3>
</div> <!--masonry_item-->

</div><!--#masonry_container .group-->
Run Code Online (Sandbox Code Playgroud)

CSS;

.group {
    display: …
Run Code Online (Sandbox Code Playgroud)

css jquery-masonry

4
推荐指数
2
解决办法
1万
查看次数

Flexslider在Firefox或Safari中不起作用

嗨,我正在尝试将Flexslider用于我的Bigcommerce网站,该网站适用于Chrome,但不适用于Safari或Firefox 27.0.1.它只是将所有图像显示在彼此之上,没有滑动.

我试过这个解决方案:

https://github.com/woothemes/FlexSlider/issues/958

但不起作用.

任何线索将不胜感激.

jquery flexslider

3
推荐指数
1
解决办法
4448
查看次数

封闭内部循环

我知道使用此代码将0到9记录的方法之一:

编辑: 来源

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
      console.log(i);
    }), 10)
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

setTimeout自我调用并i作为参数传递,如下所示:

for(var i = 0; i < 10; i++) {
    setTimeout((function(i) {
      console.log(i);
    })(i), 10)
}
Run Code Online (Sandbox Code Playgroud)

但我已经测试过setTImeout自我调用而不通过i,它仍然有效:

for(var i = 0; i < 10; i++) {
    setTimeout((function() {
      console.log(i);
    })(), 10)
}
Run Code Online (Sandbox Code Playgroud)

的jsfiddle

我的问题:

  1. 为什么即使不i作为参数传递也能工作?
  2. 有必要通过i吗?

javascript closures

3
推荐指数
1
解决办法
130
查看次数

使用AngularJS进行隐形Google reCaptcha

我正在尝试在我的AngularJS Web应用程序中实现隐形 reCAPTCHA.根据他们的文档,我应该在登录表单的提交按钮中添加一个名为"data-callback"的属性.但是,我使用ng-click将http请求的功能附加到按钮.那么我应该把"data-callback"属性的值放入什么?另外,我怎么知道recaptcha结果是否成功,并获得g-recaptcha-response以使用我的http请求发送到服务器?

https://developers.google.com/recaptcha/docs/invisible

javascript recaptcha angularjs

3
推荐指数
1
解决办法
4064
查看次数