小编Ham*_*ter的帖子

我在WordPress主题中使用Contact Form 7.

它目前正在返回span并且input:

<span class="wpcf7-form-control-wrap name">
  <input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name">
</span>

但我只需要input:

<input type="text" name="name" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="name">

如何删除span包装？

如何在没有javascript的联系表单7 字段中添加自定义属性？

例如,页面上有这样一个字段:

<input type="text" name="name" class="form-control" id="name-1" data-attr="custom" data-msg="????? 1"> 

问题:是否可以在管理面板中设置这些字段的自定义属性(data-attr,data-msg)？

I use bootstrap-vue modal:

In my project codesandbox:

Template:

<template>
  <b-button variant="link" class="btn-remove" @click="removeItemFromOrder(index)">
    Remove item
  </b-button>
</template>

Script generating modal with custom content:

<script>
export default {
  name: "HelloWorld",
  methods: {
    removeItemFromOrder: async function (position) {
        let self = this

        const h = this.$createElement

        const titleVNode = h('div', { domProps: { innerHTML: '<h2>Remove this item?</h2>' } })

        const messageVNode = h('div', { class: ['modal-complete'] }, [

          h('div', {
            domProps: {
              innerHTML:  '<h2>Remove this item?</h2>'+
                          '<span class="popup-meta">'+
                            'Are …

我有一个前端项目,工作流程是gulp.

插件:

• 一饮而尽,注入
• browsersync
• 一饮而尽手表
• 一饮而尽,useref

gulpfile.js:

var 
    gulp         = require('gulp'),
    ...

var path = {
    app : {          // src
        html   : 'app/*.html',
        js     : 'app/js/*.js',
        svg    : 'app/**/*.svg',
    },
    dist : {         // dist
        html   : 'dist/',
        js     : 'dist/js/',
    },
    watch : {        // watcher
        html   : 'app/**/*.html',
        svg    : 'app/**/*.svg',
        js     : 'app/js/**/*.js',
    }
};

// server
var config = {
    server : {
        'baseDir' : './dist'
    },
    host : 'localhost',
    port : 9000,
    tunel : …

有一个简单的图像地图,tooltip点击时可以输入area/输出map:

var $section = $('.plan');

$('.panzoom').panzoom({
  $zoomIn: $section.find(".zoom-in"),
  $zoomOut: $section.find(".zoom-out"),
  $zoomRange: $section.find(".zoom-range"),
  $reset: $section.find(".reset"),
  startTransform: 'scale(1)',
  increment: 0.1,
  minScale: 1,
  contain: 'invert',
  maxScale: 5,
  focal: {
    clientX: 0, 
    clientY: 0
  },
  onEnd: function(){
    X();
  }
}).panzoom('zoom', true);

$('map area').each(function(i,e){
		    // console.log( $(e).data('status') );

  var data = $(e).data('maphilight') || {};
  data.fillColor = 'db2205';

  switch( $(e).data('status') ){               

    case 'sales':
      data.fillColor = 'db2205';
      data.strokeColor = 'db2205';
      data.fillOpacity = 0.5;
      break;

    case 'free':
      data.fillColor = '98c13c';
      data.strokeColor = …

我正在使用 bootstrap5 scss。

我将 ltr 的样式作为标准包含：@import "~ bootstrap / scss / bootstrap";

问题：如何连接或启用rtlbootstrap 5 scss 样式？

从说明来看，除了如何以标准方式通过链接进行连接之外，没有什么是清楚的，但这在 scss 中是必要的。

我有一个垂直方向的光滑滑块：

$('.slider').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  infinite: false,
  centerMode: true,
  vertical: true,
  focusOnSelect: true
});

.slider {
  background: #eee;
  margin: 1rem;
}

.slick-vertical .slick-slide {
  cursor: pointer;
  padding: 1rem;
}

.slick-vertical .slick-slide:hover {
  background: #ddd;
}

.slick-vertical .slick-slide img {
  display: none;
  margin: 0 auto;
}

.slick-slide {
  border: 1px solid #ccc;
  text-align: center;
}

.slick-vertical .slick-slide.slick-current img {
  display: block;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	  
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

  
<div class="slider">
  <div>
    <p>
      Lorem …

我有一些代码.

帕格:

div(data-counter="100")

SCSS:

$start: 100;
$end: 20;

div:before {
  content: attr(data-counter);
  animation: countdown 10s steps(1, start) forwards;
}

@keyframes countdown {
  @for $i from 1 through $start { 
    @if $i == 50 {
      100% {
        content: 'Stop';
      }
    } @else {
      #{$i}% {
        content: '#{($start - $i)}';
      }
    }
  } 
}

问题是计数器计数从100何时到达50,计数器将停止 - 100% {content: 'Stop'; }动画将结束(现在它继续49% {content: '51';} 100% {content: 'Stop';} 51% {content: '49';}).

问题:break;在js中是否存在像scss这样的东西？

codepen

PS: @break;不能按预期工作. …

我有一个带有 自定义mCustomScrollbar scrollbar的漂亮滑块：

// ???????
var $carousel = $('.slick').slick({
  slidesToShow: 3,
  slidesToScroll: 1,               
  dots: false,
  infinite: false,
  prevArrow: $('.slick-prev'),
  nextArrow: $('.slick-next'),

});   

// $carousel.on('wheel', (function(e) {
//   e.preventDefault();

//   if (e.originalEvent.deltaY < 0) {
//     $(this).slick('slickNext');
//   } else {
//     $(this).slick('slickPrev');
//   }
// }));

// ??????????
$('[data-filter=".idx-2"]').click(function(e) {
  $carousel.slick('slickUnfilter');
  $carousel.slick('slickFilter', $('.idx-2') );

  console.log('click 2');
});

$('[data-filter=".idx-1"]').click(function(e) {
  $carousel.slick('slickUnfilter');
  $carousel.slick('slickFilter', $('.idx-1') );

  console.log('click 1');
});

$('[data-filter="*"]').click(function(e) {
  $carousel.slick('slickUnfilter');
  $carousel.slick('slickFilter', $('.element-item') );

  console.log('*');
});

// ??????
$(window).load(function(){
  $(".mcs-horizontal").mCustomScrollbar({ …

我有一个简单的 vue 项目。

我使用vue2-google-maps连接一个谷歌地图。

并且有 json 文件（或者更确切地说是 data.php）：

{
  "locations": [
    {
      "name": "Location 1",
      "adress": "215 West Girard Avenue 19123",
      "location": {
        "lat": "39.9695601",
        "lon": "-75.1395161"
      },
      "lable": "200",
      "prev": "img-1.png"
    },
    { ...

文件GoogleMap.vue --> 模板：

<template>  
    <div class="container">    
        <gmap-map id="map" v-bind="options">
            <gmap-marker
                :key="index"
                v-for="(m, index) in markers"
                :position="m.position"
                :clickable="true"
                :draggable="true"
                :label="m.label"
                @click="openWindow"

            />
            <gmap-info-window 
                @closeclick="window_open=false" 
                :opened="window_open" 
                :position="infowindow"
                :options="{
                  pixelOffset: {
                    width: 0,
                    height: 0
                  }
                }"
            >
                Hello world!
            </gmap-info-window> …