小编Fre*_*ddy的帖子

我是JQuery的新手,无法处理我如何做到这一点.我的数据库中有一个名为的表user_thoughts.我正在尝试实现无限滚动功能,alert("bottom")当thoughts用户超过10 时,该功能应该是当前的.

每个用户都可以上传thought和上传profile_page,只显示他们的想法.默认情况下,我需要显示10个帖子,然后当用户滚动到页面底部时,它会自动加载用户编写的10个帖子.

这是我的infinity_scroll脚本:

$(document).ready(function(){
    var load = 0;
    $(window).scroll(function(){
        if($(window).scrollTop() == $(document).height() - $(window).height()){
            load++;
            // start AJAX
            $.post("inc/ajax.php", {load:load},function (data){
                $(".userposts_panel").append(data); //  class
                alert ("bottom");
            });
        } // if closed
    });
});

我需要一个if语句围绕着alert()这样的东西 - if the user has over 10 posts and the user has scrolled to the bottom, then display more data- 再现在,我只是使用alert()进行测试.例如,如果用户仅制作了2个帖子,并且用户滚动到底部,alert()则不应该发生.

我的想法是,我需要一个var获取用户的帖子数量,然后用户远远指定条件如何

  if (posts >=10){ 
      alert("bottom"); …

我正在尝试在我的网站上实施Barba JS和GSAPReact。

作为参考，我在这里遵循了这个视频教程，当然这个教程不在React.

这是我的文件夹结构，其中显示了此过渡效果的所有相关文件：

theme
  public
    index.html
  src
    components
      Header
        Header.js
    pages
      Homepage
      Contact
    utils
      anim.js
      helpers.js
  App.js
  index.js

我安装了以下软件包：

• gsap - 版本3.8.0
• @barba/core - 版本2.9.7

当前结果

• 没有控制台错误，也没有编译错误。

• 切换页面时，没有过渡。几乎感觉像是barba没有启动。

演示：

由于演示涉及到一些文件，我在这里创建了一个codesandbox。

编辑：

已更新我的barba转换代码并添加了debug: true. 然后，当将鼠标悬停在我的联系页面按钮上时，控制台会显示错误：[@barba/core] Error: Fetch error at XMLHttpRequest.o.onerror？

import { pageTransition } from "./helpers";
import barba from '@barba/core';

export function delay(n) {
  n = n || …

在我的WooCommerce商店中，我安装了WooCommerce PayPal Payments插件。

这是我当前的付款结构的图片：

现在，当我单击“使用 PayPal 付款”按钮时，会弹出 PayPal 模式，提示我登录 PayPal。如果我等待几秒钟，并且在模式中不输入任何内容，则会收到一封电子邮件，内容为“谢谢您的订单”。

简而言之，即使尚未输入付款详细信息，也会触发 WooCommerce 新订单电子邮件。如果我随后关闭模式并刷新结帐页面，系统仍会要求我付款（通常在成功付款和订购后，您将被重定向到感谢/摘要页面）。

然后，当以管理员身份登录时，我可以看到新订单出现，其中表明订单已付款。

由于我启用了 PayPal 付款插件，黄色按钮已取代提供的默认“下订单”按钮WooCommerce。最初，我在考虑单击黄色按钮，也许默认按钮也被单击（因为它仍在标记中）。

默认按钮的标记为：

<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Place order" data-value="Place order">Place order</button>

我通过 CSS 隐藏了它：

#place_order {
  height: 0;
  opacity: 0;
  visibility: hidden;
  display: none;
  pointer-events: none;
}

我试图pointer-events: none;阻止这个按钮点击，如果这是造成这个问题的原因的话。

但是，付款未完成时仍然会触发电子邮件吗？

你知道这里可能发生什么吗？WooCommerce 日志中也没有任何内容可供我检查，也没有生成任何日志。

编辑：

我一直在阅读以下帖子，注意到发帖者说他们“在 woocommerce 设置中禁用了 IPN ”。我想也许在我的设置中禁用此功能将阻止它发送订单电子邮件（然后当IPNPayPal 发送和接收电子邮件时，电子邮件将被触发）。但是，我在设置中看不到可以关闭的地方IPN？我上线了WooCommerce Version 5.8.0。

我有一个名为 的插件WooCommerce PayPal Payments，允许PayPal以WooCommerce. 有了这个插件，他们还可以选择credit card付款。见下文：

所有这些都会在前端呈现以下内容：

现在，我正在尝试将AMEX徽标更改为自定义徽标。

我看过很多文章介绍如何更改PayPal徽标，例如这篇文章，但没有看到任何提到如何更改 AMEX、MasterCard 或其他徽标的文章。

例如，我使用这个钩子来更改PayPal徽标：

add_filter( 'woocommerce_gateway_icon', 'remove_what_is_paypal', 10, 2 );

function remove_what_is_paypal( $icon_html, $gateway_id ) {
  if( 'paypal' == $gateway_id ) {
    $paypal_logo = get_template_directory_uri()."/assets/build/vectors/paypal-logo-original.svg";
    $icon_html = "<img class='checkoutPage__paypal' src=".$paypal_logo."' alt='PayPal logo'>";
  }
  return $icon_html;
}

如何更改AMEX徽标？

我有一个折线图，我想更改它的工具提示。我希望它在悬停时显示以下内容（作为示例）：

Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7

工具提示中的数据很好并且有效。在这里看到这个小提琴

我想做的是添加到工具提示中，以便它也可以在其中显示问题。

我尝试过的：

 tooltips: {
   callbacks: {
     label: function(tooltipItem, data) {
       var dataset=data.datasets[tooltipItem.datasetIndex];
       return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
     }
   }
 }

Question: This is question 1
Your answers: 3
Average answers: 7
Your average: 5
Average: 7

 tooltips: {
   callbacks: {
     label: function(tooltipItem, data) {
       var dataset=data.datasets[tooltipItem.datasetIndex];
       return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index]+questions[i];
     }
   }
 }

var q1 = "This is …

我创建了一批自定义ACF gutenberg块，现在尝试分配预览图像。

问题：让预览图像显示

下图显示了一个paragraph组件，它是一个默认块。

您可以在右侧看到，段落块旁边有一个图像和描述。以下是我的组件当前的显示方式（完整代码将在末尾提供）

正如您所看到的，它说“没有可用的预览”并且没有添加任何描述，即使我已经在代码中定义了两者。

方法：

acf-blocks/blocks.php

<?php
$img_root = "../../src/components";

$hero = array(
    'name' => 'hero',
    'title' => __('Hero') ,
    'description' => __('Hero section') ,
    'render_callback' => 'block_render',
    'category' => 'formatting',
    'icon' => 'admin-comments',
    'image' => $img_root . '/hero/hero.png',
    'mode' => 'edit',
    'keywords' => array(
        'hero'
    ) ,
);

$blocks = [$hero];

return $blocks;

?>

acf-blocks/functions.php

<?php

function block_acf_init(){
  $path = get_template_directory().'/inc/acf-blocks/blocks.php';
  $blocks = require($path);
  foreach($blocks as $block) {
    acf_register_block_type($block);
  }
}

if( function_exists('acf_register_block_type') …

我有一个ul总共包含11项目的项目。

我使用它是display: grid为了实现第一列（两列中的第一列）包含元素7的布局li。

我尝试通过使用遵循此处的方法grid-template-areas，但我的left li方法似乎彼此重叠。

简而言之，我希望第一列（左）包含7项目，第二列（右）包含4.

演示：

.grid {
  display: grid;
  grid-template-areas: "left right";
  grid-template-columns: repeat(2, 1fr);
  min-width: 375px;
  padding: 10px 0;
  list-style-type: none;
}
.grid__item:nth-child(-n+7) {
  grid-area: left;
}

<ul class="grid">
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
</ul>

我有一个文本输入字段:

<input type="text" name="email" size="25" placeholder="Email Address" required/>

有没有办法将输入字段格式化为仅允许某些文本有效？

例如:在该特定文本字段中,用户必须输入以...结尾的电子邮件地址@hotmail.co.uk.任何其他电子邮件域如@yahoo.com无效,因此在单击提交时将显示错误(不会注册用户).

我正在尝试更改我正在使用的图形的网格线（和边框）颜色。我看过文档，但只找到了更改fill. 看不到任何有关实际线路的信息。

演示：

var chart = am4core.create("dataChart", am4charts.XYChart);

chart.data = [{
    "xValue": "Q1",
    "yValue": 3
}, {
    "xValue": "Q2",
    "yValue": 4
}, {
    "xValue": "Q3",
    "yValue": 7
}, {
    "xValue": "Q4",
    "yValue": 2
}, {
    "xValue": "Q5",
    "yValue": 9
}];

/* Create axes */
var theXAxis = chart.xAxes.push(new am4charts.CategoryAxis());
theXAxis.dataFields.category = "xValue";
theXAxis.renderer.minGridDistance = 30;

/* Create value axis */
var theYAxis = chart.yAxes.push(new am4charts.ValueAxis());
theYAxis.renderer.labels.template.disabled = true;

/* Create series */
var series1 = chart.series.push(new am4charts.LineSeries()); …

我有一个简单的select，最多需要保持200px宽度。我遇到的问题是较长的文本出现在背景图像的顶部。

我怎样才能得到它以便选择保留200px，然后，如果存在更长的文本，它不会与下拉箭头重叠？

    select{
      width: 200px;
      border: 0;
      background: #fff url(https://f.hubspotusercontent00.net/hubfs/2367000/select_arrow.png/medium.png?t=1592558417346);
      background-size: 20px;
      background-repeat: no-repeat;
      background-position: right 25px center;
      background-size: 15px;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 10px 15px;
      border: 1px solid #B8B9BA;
      outline:none;
      border-radius: 26px;
    }

<select>
  <option>This option here is really long</option>
  <option>Medium length option</option>
  <option>short</option>
</select>