小编Iva*_*pić的帖子

在Bootstrap 4-alpha中使用媒体断点

在Bootstrap 3中我用这个:

.something {
    padding: 5px;
    @media screen and (min-width: $screen-sm-min) { 
        padding: 20px;
    }
    @media screen and (min-width: $screen-md-min) { 
        padding: 40px;
    }
}
Run Code Online (Sandbox Code Playgroud)

我如何在Boostrap 4-alpha中做同样的事情?我在他们的文档中找不到一个例子.这是在variables.scss中

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@include _assert-starts-at-zero($grid-breakpoints);
Run Code Online (Sandbox Code Playgroud)

twitter-bootstrap

41
推荐指数
3
解决办法
9万
查看次数

反应this.state未定义?

我正在关注Pluralsight的初学者教程,在表单上提交一个值传递给addUser组件方法,我需要将userName推送到this.state.users但是我得到错误

 App.jsx:14 Uncaught TypeError: Cannot read property 'users' of undefined
Run Code Online (Sandbox Code Playgroud)

零件

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
    }
    // This is triggered on form submit in different component
    addUser(userName) { 
        console.log(userName) // correctly gives String
        console.log(this.state) // this is undefined
        console.log(this.state.users) // this is the error
        // and so this code doesn't work
        /*this.setState({
            users: this.state.users.concat(userName) …
Run Code Online (Sandbox Code Playgroud)

reactjs

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

Vue中的方法在点击时运行两次

为什么方法集会运行两次?单击星标时可以看到控制台.如果我删除@click="set(rating)"没有任何发生,所以不喜欢它再次被称为其他地方.

http://jsfiddle.net/q22tqoLu/

HTML

<div id="star-app" v-cloak>
            <star-rating value="0"></star-rating>
        </div>

        <template id="template-star-rating">
            <div class="star-rating">
                <label
                class="star-rating__star"
                v-for="rating in ratings"
                :class="{'is-selected': ((value >= rating) && value != null), 'is-disabled': disabled}"
                @mouseover="star_over(rating)"
                @mouseout="star_out"
                @click="set(rating)">
                <input
                class="star-rating star-rating__checkbox"
                type="radio"
                :name="name"
                :disabled="disabled"
                :id="id"
                :required="required"
                v-model="value">
                ?
            </label>
        </div>
    </template>
Run Code Online (Sandbox Code Playgroud)

JS

  'use strict';

    Vue.component('star-rating', {
        template: '#template-star-rating',
        data: function data() {
            return {
                value: null,
                temp_value: null,
                ratings: [1, 2, 3, 4, 5]
            };
        },
        props: {
            'name': String,
            'value': null,
            'id': String,
            'disabled': …
Run Code Online (Sandbox Code Playgroud)

javascript vue.js vuejs2

6
推荐指数
5
解决办法
5778
查看次数

柔性柱的自动宽度

如何设置第一个flex列的宽度,使其宽度仅为其内容的大小? http://codepen.io/anon/pen/rrKkOW

<div class="flex">
  <div class="inside inside-left">Left</div>
  <div class="inside inside-right">RIght</div>
</div>

.flex {
  display: flex;
}

.inside {
  flex: 1;
  border: 1px solid #000;
}
Run Code Online (Sandbox Code Playgroud)

设置width: auto不起作用...有点像是flex-basis: content很高兴:)

css flexbox

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

Bootstrap侧边栏在滚动条上闪烁

我的目标是侧边栏固定,它开始滚动很好,但当它接近页脚时,它开始闪烁.我做错了什么?看来,引导未定,并保持切换.affix-bottom#sidebar

http://codepen.io/anon/pen/MJMQMr

JS

var $sidebar = jQuery('#sidebar');

jQuery($sidebar).affix({
  offset: {
    top: $sidebar.offset().top,
    bottom: function() {
      return (this.bottom = jQuery('#footer').outerHeight(true))
    }
  }
})
Run Code Online (Sandbox Code Playgroud)

CSS

.affix {
  top: 0;
}

.affix-bottom {
  position: absolute;
  top: auto;
  bottom: 20px;
}
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="container">

  <div class="header">
      <!-- HEADER -->
  </div>

  <div class="row">
    <div class="content col-md-8">
        <!-- CONTENT -->
    </div>

    <div class="col-md-4">
      <div id="sidebar">
        <!-- AFFIXED -->
      </div>
    </div>

  </div>

  <div id="footer">
        <!-- FOOTER -->
  </div>

</div>
Run Code Online (Sandbox Code Playgroud)

html css jquery twitter-bootstrap

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

如何设置 PHP CodeSniffer 来扩展 WordPress 编码标准 + VSCode 中的自动修复错误?

如何使用扩展 WordPress 编码标准的个人规则为项目设置 PHP CodeSniffer + 保存时在 VSCode 中自动修复错误?

我已经全局安装了 CodeSniffer

composer global require "squizlabs/php_codesniffer=*"
Run Code Online (Sandbox Code Playgroud)

WordPress 编码标准安装在主题文件夹内(因此它们位于项目内/wp-content/themes/bideja/wpcs

git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs
Run Code Online (Sandbox Code Playgroud)

我创建的主题文件夹内部phpcs.xml应继承 WordPress 标准,以便我可以进一步自定义它

<?xml version="1.0"?>
<ruleset name="Bideja">
    <description>Sniffs</description>

    <config name="installed_paths" value="wpcs" />

    <arg value="s"/>

    <exclude-pattern>assets/*</exclude-pattern>
    <exclude-pattern>node_modules/*</exclude-pattern>
    <exclude-pattern>vendor/*</exclude-pattern>

    <rule ref="WordPress-VIP">
        <exclude name="Generic.Files.EndFileNewline.NotFound" />
        <exclude name="WordPress.PHP.YodaConditions.NotYoda" />
    </rule>

</ruleset>
Run Code Online (Sandbox Code Playgroud)

在主题内的 Bash 终端中,我可以扫描页面中的错误并修复它们

phpcs page.php
phpbcf page.php 
Run Code Online (Sandbox Code Playgroud)

但是 VSCode 如何在保存时修复它们呢?我收到弹出错误:

phpcs: Referenced sniff "WordPress-VIP" does not exist
Run Code Online (Sandbox Code Playgroud)

我应该在 User settings.json 中放置什么?

"phpcs.enable": true,
"phpcs.standard": …
Run Code Online (Sandbox Code Playgroud)

php wordpress phpcodesniffer visual-studio-code

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

使用 onclick 从输入中获取价值

如何使用 vanilla javascript 在点击时获取输入值?

function getvalue() {
  console.log(this.val);
}
Run Code Online (Sandbox Code Playgroud)
<input type="text" onclick="getvalue()" value="asdf"></input>
<input type="text" onclick="getvalue()" value="asdf2"></input>
<input type="text" onclick="getvalue()" value="asdf3"></input>
Run Code Online (Sandbox Code Playgroud)

javascript

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

php和html之间不需要的空间

我有这个代码,问题是每个逗号前都有一个空格.

Name Lastname , (1990.) , Title ...
Run Code Online (Sandbox Code Playgroud)

它应该是

Name Lastname, (1990.), Title ...
Run Code Online (Sandbox Code Playgroud)

我需要使用echo以这种格式获取数据.

ob_start();

...

<?php // DATE  ?>
<?php if(!empty($ref['godina_izdanja'])) :
echo ', (<span class="date">' . $ref['godina_izdanja'] . '</span>.)';
endif; ?>

<?php // TITLE?>
<?php if(!empty($ref['title'])) : 
echo ', <em><span class="title">' . $ref['title'] . '</span></em>';
endif; ?>
Run Code Online (Sandbox Code Playgroud)

有什么我可以做的来解决它,但有代码可读吗?我知道我可以把所有东西连在一起,但它会变得难以阅读和保持

php wordpress ob-start

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

根据 Woocommerce 中选择的付款方式禁用运输方式

如果用户选择“货到付款”付款,我需要禁用特定的运输方式。问题是以下代码仅在我每次重置 WooCommerce 瞬态并刷新时才有效。它不适用于来回用户选择。

add_filter( 'woocommerce_package_rates', 'alter_shipping_methods', 100 );
function alter_shipping_methods( $rates ) {

    $chosen_gateway = WC()->session->chosen_payment_method;

    // If payment is Cash on delivery remove specific shipping 
    if($chosen_gateway == 'cod') {

        foreach ( $rates as $rate_id => $rate ) {
           if ( $rate->label === 'Hrvatska pošta' ) {
              unset( $rates[ $rate_id ] );
            }
       }

    }

    return $rates;

}
Run Code Online (Sandbox Code Playgroud)

我确实有这个应该触发的代码,当我点击选项时,我会在控制台中看到输出。

jQuery(document.body).on('change', 'input[name="payment_method"]', function() {
    console.log('Payment method changed');
    jQuery('body').trigger('update_checkout');
});
Run Code Online (Sandbox Code Playgroud)

我试过这个,它不起作用

function action_woocommerce_checkout_update_order_review($array, $int) {
    WC()->cart->calculate_shipping();
    return;
}
add_action('woocommerce_checkout_update_order_review', 'action_woocommerce_checkout_update_order_review', 10, 2); …
Run Code Online (Sandbox Code Playgroud)

php ajax jquery shipping woocommerce

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

获取在 Woocommerce 中购买过商品的所有客户的列表

我如何获得至少购买过某样东西的客户列表,以及是否有可能按订单数量订购?据我所知,_order_count元键存在并且如果他们已经下订单,则设置为整数下的订单数。

此查询忽略订单计数,只显示所有用户。

$args = array(
     'role' => 'customer',
     'number' => -1,
     'order' => 'ASC',
     'orderby' => 'meta_value',
     'meta_query' => array(
          array(
               'key'     => '_order_count',
               'value'   => array(''),
               'compare' => 'NOT IN'
          )
    )
);

$query = new WP_User_Query($args);
Run Code Online (Sandbox Code Playgroud)

这是一个表格,它将回显有关用户花费了多少以及他下了多少订单的信息

<?php if (! empty($query->get_results())) : ?>

     <table class="table">

          <thead>
                    <tr>
                         <th data-sort="string">Name</th>
                         <th data-sort="string">Email</th>
                         <th data-sort="float">Total spent (<?php echo get_option('woocommerce_currency'); ?>)</th>
                         <th data-sort="int">Order placed</th>
                    </tr>
          </thead>

          <tbody>

          <?php foreach ($query->get_results() as $user) : ?>

               <?php $customer = new WP_User($user->ID); …
Run Code Online (Sandbox Code Playgroud)

php wordpress orders woocommerce customer

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

如何定位 iframe 内的图像

如何使用 CSS 将图像定位到 iframe 内?

这不起作用

iframe img {
    height: auto;
    width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

css iframe

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