RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / user-198239

Игорь's questions

Martin Hope
Игорь
Asked: 2022-05-09 21:38:59 +0000 UTC

如果对象数组已经存在,则将它们推送到适当的类别中

  • 1

对不起标题,我不能更好地表达它。

有(好吧,因为它是 - 我创建它)以下形式的对象数组:

在此处输入图像描述

有些元素属于类型 - Сезон,有些 - to Размеры,我想将它们组合成类别,结果推送时,每次都会创建一个新对象。你能告诉我如何推入一个数组,使它看起来像这样吗?

在此处输入图像描述

这就是我的做法,显然我离正确的解决方案还很远。链接到沙盒。

function filterFunc() {
  let checkboxInputs = $('input[type="checkbox"]'),
      tempArr = [];
  
  checkboxInputs.on('click', function() {
    $(this).each(function() {
      let currentFilterTypeName = $(this).closest('.form-group').find('.title').text().trim(),
          currentFilterItemID = $(this).attr('id'),
          currentFilterItemValue = $(this).closest('li').find('label').text().trim();
    
          tempArr.push({
            currentFilterTypeName: currentFilterTypeName,
            currentFilterItemID: [currentFilterItemID],
            currentFilterItemValue: [currentFilterItemValue]
          });
    })
    
    console.log(tempArr);
  });
}
filterFunc();
ul {
  margin: 0 0 20px 0;
  padding: 0;
  list-style: none;
}
.title {
  margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-block content">
  <div class="form-group season">
    <div class="title">Сезон</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="seasonSummer">
        <label for="seasonSummer">Лето</label>
      </li>
      <li>
        <input type="checkbox" id="seasonWinter">
        <label for="seasonWinter">Зима</label>
      </li>
      <li>
        <input type="checkbox" id="seasonSpring">
        <label for="seasonSpring">Весна</label>
      </li>
    </ul>
  </div>
  <div class="form-group size">
    <div class="title">Размер</div>
    <ul class="checkbox-list">
      <li>
        <input type="checkbox" id="size18">
        <label for="size18">18</label>
      </li>
      <li>
        <input type="checkbox" id="size19">
        <label for="size19">19</label>
      </li>
      <li>
        <input type="checkbox" id="size20">
        <label for="size20">20</label>
      </li>
    </ul>
  </div>
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-04-16 19:08:28 +0000 UTC

替换特殊字符时出错

  • 1

如果没有将“特殊”字符添加到要替换的字符列表的对象中,则有一个代码可以完全满足。下面的示例将按预期返回:front%end.

let sortArr = {
  " ": "-",
  "-": "%",
  "!": "i33",
};
                
let str = 'front-end'


let re = new RegExp(Object.keys(sortArr).join("|"),"gi");
    str = str.replace(re, function(matched) {
        console.log('matched ', matched);
        return sortArr[matched.toLowerCase()];
    });
    
alert(str);

相同的示例,但添加例如$:

let sortArr = {
  " ": "-",
  "-": "%",
  "!": "i33",
  "$": "i36",
};
                
let str = 'front-end'


let re = new RegExp(Object.keys(sortArr).join("|"),"gi");
    str = str.replace(re, function(matched) {
        console.log('matched ', matched);
        return sortArr[matched.toLowerCase()];
    });
    
alert(str);

结果:front%endundefined。我究竟做错了什么?沙盒的链接在这里。

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-10-02 00:40:51 +0000 UTC

如何在对象数组中设置特定的属性序列?

  • 2

我有以下格式的对象数组:

var arr = [
  { key: 'title', value['front end', 'back end'] }
  { key: 'location', value['london'] }
  { key: 'type', value['full-time'] }
]

如何在这样的数组中设置特定顺序的属性?例如,type成为第一个,title-第二个,和location-第三个。

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-09-07 15:18:13 +0000 UTC

猫头鹰旋转木马2。单击循环时居中缩略图:true

  • 5

有两个 owl-carousels:preview 和 main。他们是同步的。两个旋转木马都有loop: true。owl-item单击时无法使预览滑块居中 -s。我究竟做错了什么?

沙盒在这里。我将用注释标记负责所需行为的代码centered items(注释将在两个地方)。

$(document).ready(function() {

    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4;
    var syncedSecondary = true;

    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: true,
        autoplay: false, 
        dots: true,
        loop: true,
        responsiveRefreshRate: 200,
        navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
    }).on('changed.owl.carousel', syncPosition);

  sync2.on('initialized.owl.carousel', function() {
    sync2.find(".owl-item.center").eq(0).addClass("current");
  })
  
  /* centered items */
  sync2.find('.owl-item').each(function(index) {
    var item = $(this).attr('data-position', index);
  })
  
  sync2.owlCarousel({
    items: slidesPerPage,
    dots: false,
    nav: false,
    loop: true,
    center: true,
    smartSpeed: 200,
    slideSpeed: 1000,
    slideBy: slidesPerPage,
    responsiveRefreshRate: 100
  }).on('click', '.owl-item', function(e) {
        var carouselSync1 = $('#sync1').data('owl.carousel');
        e.preventDefault();
    
        var current = $(this).index();
        carouselSync1.to(carouselSync1.relative(current));
        
        /* centered items */
        sync2.trigger('to.owl-carousel', $(this).data('position'));
      });

    function syncPosition(el) {
       
        var current = el.item.index;
      
        sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
        var onscreen = sync2.find('.owl-item.active').length - 1;
        var start = sync2.find('.owl-item.active').first().index();
        var end = sync2.find('.owl-item.active').last().index();
      
        if (current > end) {
          sync2.data('owl.carousel').to(current, 100, true);
        }
        if (current < start) {
          sync2.data('owl.carousel').to(current - onscreen, 100, true);
        }
    }

    function syncPosition2(el) {
      if (syncedSecondary) {
        var number = el.item.index;
        sync1.data('owl.carousel').to(number, 100, true);
      }
    }
});
#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#sync2 .item {
  background: #c9c9c9;
  padding: 10px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>




<div id="sync1" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

<div id="sync2" class="owl-carousel owl-theme">
    <div class="item">
        <h1>1</h1>
    </div>
    <div class="item">
        <h1>2</h1>
    </div>
    <div class="item">
        <h1>3</h1>
    </div>
    <div class="item">
        <h1>4</h1>
    </div>
    <div class="item">
        <h1>5</h1>
    </div>
    <div class="item">
        <h1>6</h1>
    </div>
    <div class="item">
        <h1>7</h1>
    </div>
    <div class="item">
        <h1>8</h1>
    </div>
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-08-09 14:13:44 +0000 UTC

选择上一个被点击的项目

  • 1

让我解释一下整体情况。按类别有这样的过滤器。通过单击这些元素中的每一个,带有搜索结果的按钮会出现在最后一个选定元素的对面。可以选择或取消选择类别,在这种情况下,按钮应转到先前选择的列表项。

问题: 是否有可能以某种方式确定这个先前选择的列表项?

function categories() {
  var categoriesItem = $('.list li a');
      
  categoriesItem.on('click', function(e) {
    e.preventDefault();
    
    var currentCategoriesItem = $(this);
    
    // Определение выбранных эл-тов
    if (currentCategoriesItem.hasClass('active')) {
      currentCategoriesItem.removeClass('active');
    } else {
      currentCategoriesItem.addClass('active');
    }
  });
}

categories();
.list li a.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li><a href="#close">Яблоки</a></li>
  <li><a href="#close">Бананы</a></li>
  <li><a href="#close">Груши</a></li>
  <li><a href="#close">Апельсины</a></li>
</ul>

javascript
  • 3 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-07-19 20:03:10 +0000 UTC

gulp-sass 不会将 scss 文件编译为单个 css

  • 1

我正在接一个项目。构建 scss 文件的任务的问题 - 插件只是将权限更改scss为css,文件未编译。路径是正确的,构建过程中没有错误。可能是什么原因?

/* Сама таска */
gulp.task('sass', function () {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(prefixer())
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('dist/style'))
    .pipe(reload({
        stream: true
  }));
});

/* вотчер */
gulp.task('watch', function() {
    gulp.watch("src/sass/**/*.scss", ['sass']);
});

结果如下:http: //ipic.su/img/img7/fs/kiss_8kb.1532001775.png

PS 仅显示与样式组装相关的组装部分。

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-07-11 18:56:38 +0000 UTC

SVG 精灵。并非所有图标都加载

  • 2

我在网站上使用 svg sprites。图标相当多(100个左右),显示99%的图标都没有问题。但是有些不加载,或者加载在一个页面上而不是另一个页面上。
在控制台中它会显示一个错误500 (Internal Server Error)(即在加载精灵时)。
有什么建议可能与它有关吗?

我将举一个构建 svg sprite 的示例:

<svg  width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs> 
       <symbol id="icon-apple" viewBox="0 0 56 64">
          ...
       </symbol>
   </defs>
</svg>

我通过 ID 插入 html:

<svg class="svg-icons">
   <use xlink:href="images/svgdefs.svg#icon-apple"></use>
</svg>

不可加载的图标代码(通过 icomoon.io 生成):

<symbol id="icon-education" viewBox="0 0 40 40">
    <path d="M6.66 16l13.34 8 20-12-20-12-20 12h20v4h-13.34zM0 16v16l4-4.44v-9.16l-4-2.4zM20 40l-14-8.4v-12l14 8.4 14-8.4v12l-14 8.4z"></path>
</symbol>
html
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-06-21 19:48:53 +0000 UTC

如何在点击时显示每 4 个列表项

  • 2

有一个产品列表,显示 4 个,其余的带有display: none。每次点击按钮如何显示 4 个以上的产品?沙盒。

.list {
  column-count: 4;
  list-style: none;
}
.list li:nth-of-type(n+5) {
  display: none;
}

.btn-container {
  display: flex;
  justify-content: center;
}
<ul class="list">
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
  <li>Product</li>
</ul>

<div class="btn-container">
  <a href="#close" class="button">Button</a>
</div>

javascript
  • 3 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-01-02 21:45:17 +0000 UTC

append 在就绪时执行两次并调整大小

  • 0

里面有一个函数.append。当.ready文档及其.resize. 结果,.append它工作了两次。这可以以某种方式避免吗? 重要提示:加载页面和调整页面大小时的函数调用应该保留。

function example() {
  var targetBLock = $('.content');
  
  targetBLock.append(' <span class="additional">additional content</span>');
}
example();
$(window).resize(example()); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">Some content</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-10-30 02:50:06 +0000 UTC

粘性侧边栏。到达页脚时如何删除固定

  • 1

有一个侧边栏接收大于标题高度的滚动类stickyc 。position: fixed;当侧边栏的底部到达页脚的顶部时,我不知道如何将其删除。链接到沙盒。

function stickySidebar() {
  var scrollDistance = $(this).scrollTop();
  var headerHeight = $('.header').height();
  var $sidebar = $('aside');
  
  if (scrollDistance > headerHeight + 5) {
    $sidebar.addClass('sticky');
  } else {
    $sidebar.removeClass('sticky');
  }
}
stickySidebar();
$(window).scroll(function() {
  stickySidebar();
})
body {
  margin: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.wrapper > * {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.wrapper > *:last-child {
  margin-bottom: 0;
}
.wrapper .header,
.wrapper .footer {
  width: 100%;
  background: #d3d3d3;
}
.wrapper .header {
  height: 30px;
}
.wrapper .footer {
  height: 300px;
}
.wrapper .main {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
}
.wrapper .main .aside {
  height: 100px;
  width: 200px;
  margin-right: 5px;
  background: #d3d3d3;
}
.wrapper .main .aside.sticky {
  position: fixed;
  left: 0;
  top: 0;
  width: 200px;
  background: yellow;
}
.wrapper .main .section {
  height: 150vh;
  width: calc(100% - 205px);
  background: #d3d3d3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <header class="header">Header</header>
  <main class="main">
    <aside class="aside">Sticky Sidebar</aside>
    <section class="section">Main Content</section>
  </main>
  <footer class="footer">Footer</footer>
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-06-21 18:19:05 +0000 UTC

猫头鹰旋转木马2。居中时如何更改侧滑的宽度:true

  • 1

下午好。我正在使用以幻灯片为中心的 owlcarousel2。我们需要增加中心元素的宽度,因为 在移动版中,侧边幻灯片占用了太多空间。如何更改侧滑的宽度(在下面的屏幕截图中突出显示)? 沙盒。

在此处输入图像描述

$('.owl-carousel').owlCarousel({
    margin:10,
    loop:true,
    items:2,
    center:true
})
.owl-item {
  height: 230px;
  background: #d3d3d3;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>


<div class="owl-carousel">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-06-12 18:50:46 +0000 UTC

是否可以在不加载图像的情况下制作这样的背景?

  • 0

下午好。实际上,主题。我正在做一个着陆页,有一个带有三角形的“部分”:

在此处输入图像描述

除了如何加载图像之外什么都没有想到,但这个选项也不是最好的(我对服务器的额外请求保持沉默) - 在大屏幕上,图像从底部被切断并变成这样。

实现这样一个块的正确方法是什么?

html
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-04-24 23:47:25 +0000 UTC

OwlCarousel 2:通过按键盘上的左/右按钮切换幻灯片

  • 2

是否可以自定义 OwlCarousel 2,使幻灯片之间的切换不仅可以通过单击标准控件,还可以通过按下键盘上的“左/右”按钮来实现?沙箱就在这里。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    dots: false,
    items: 2
})
.item {
  background: #f0f0f0;
  height: 100px;
}
<link rel="stylesheet" href="https://theappsdepot.com/css/carousel.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

    <div id="first-slider" class="tab-pane fade in active">
      <div class="slider owl-carousel owl-theme">
        <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
      </div>
    </div>
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://theappsdepot.com/js/carousel.js"></script>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-03-13 15:55:29 +0000 UTC

如何强制表格超出父容器的边缘

  • 2

我有一个包含 4 列的表。所有列都具有相同的宽度。我想将按钮拧到右边/左边,以防表格不再适合页面的宽度,而不是超出父级(对于td我设置的 33.333% 宽度,即在这个例子中,第 4 列应该超出可见部分的限制),最后一个 tdshka 的宽度在表中被截断,并获得大致相同的结果。沙箱就在这里。

html
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-03-10 15:25:19 +0000 UTC

单击更改数据表中列的顺序

  • 0

你好。我使用数据表插件进行表格布局。插件 API 有一个属性ColReorder,它包括改变列顺序的能力。还有colReorder.order()方法,可以根据数组中预先设置的索引改变点击列的顺序:

$('#reverse').click( function (e) {
  table.colReorder.order( [ 5, 4, 3, 2, 1, 0 ] );
});

任务是可以更改“前进”/“后退”按钮上列的顺序,即 单击时,您需要以某种方式交换数组中的这些索引。请告诉我如何做到这一点。

$(document).ready(function() {
    $('#example').DataTable({
      colReorder: true,
      ordering: false,
      bFilter: false,
      bLengthChange: false,
      bInfo: false,
      bPaginate: false,
      autoWidth: false,
      fixedHeader: {
          header: true,
          footer: true
      }
    });
} );
.btns-block {
  display: flex;
  justify-content: space-between;
}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/cr-1.3.2/fc-3.2.2/fh-3.1.2/r-2.1.1/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/cr-1.3.2/fc-3.2.2/fh-3.1.2/r-2.1.1/rr-1.2.0/datatables.min.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
  </tfoot>
  <tbody>
      <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
      </tr>
      <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
      </tr>
      <tr>
          <td>Ashton Cox</td>
          <td>Junior Technical Author</td>
          <td>San Francisco</td>
          <td>66</td>
          <td>2009/01/12</td>
          <td>$86,000</td>
      </tr>
      <tr>
          <td>Cedric Kelly</td>
          <td>Senior Javascript Developer</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2012/03/29</td>
          <td>$433,060</td>
      </tr>
      <tr>
          <td>Airi Satou</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>33</td>
          <td>2008/11/28</td>
          <td>$162,700</td>
      </tr>
      <tr>
          <td>Brielle Williamson</td>
          <td>Integration Specialist</td>
          <td>New York</td>
          <td>61</td>
          <td>2012/12/02</td>
          <td>$372,000</td>
      </tr>
      <tr>
          <td>Herrod Chandler</td>
          <td>Sales Assistant</td>
          <td>San Francisco</td>
          <td>59</td>
          <td>2012/08/06</td>
          <td>$137,500</td>
      </tr>
      <tr>
          <td>Rhona Davidson</td>
          <td>Integration Specialist</td>
          <td>Tokyo</td>
          <td>55</td>
          <td>2010/10/14</td>
          <td>$327,900</td>
      </tr>
      <tr>
          <td>Colleen Hurst</td>
          <td>Javascript Developer</td>
          <td>San Francisco</td>
          <td>39</td>
          <td>2009/09/15</td>
          <td>$205,500</td>
      </tr>
      <tr>
          <td>Sonya Frost</td>
          <td>Software Engineer</td>
          <td>Edinburgh</td>
          <td>23</td>
          <td>2008/12/13</td>
          <td>$103,600</td>
      </tr>
      <tr>
          <td>Jena Gaines</td>
          <td>Office Manager</td>
          <td>London</td>
          <td>30</td>
          <td>2008/12/19</td>
          <td>$90,560</td>
      </tr>
      <tr>
          <td>Quinn Flynn</td>
          <td>Support Lead</td>
          <td>Edinburgh</td>
          <td>22</td>
          <td>2013/03/03</td>
          <td>$342,000</td>
      </tr>
      <tr>
          <td>Charde Marshall</td>
          <td>Regional Director</td>
          <td>San Francisco</td>
          <td>36</td>
          <td>2008/10/16</td>
          <td>$470,600</td>
      </tr>
      <tr>
          <td>Haley Kennedy</td>
          <td>Senior Marketing Designer</td>
          <td>London</td>
          <td>43</td>
          <td>2012/12/18</td>
          <td>$313,500</td>
      </tr>
      <tr>
          <td>Tatyana Fitzpatrick</td>
          <td>Regional Director</td>
          <td>London</td>
          <td>19</td>
          <td>2010/03/17</td>
          <td>$385,750</td>
      </tr>
      <tr>
          <td>Michael Silva</td>
          <td>Marketing Designer</td>
          <td>London</td>
          <td>66</td>
          <td>2012/11/27</td>
          <td>$198,500</td>
      </tr>
      <tr>
          <td>Paul Byrd</td>
          <td>Chief Financial Officer (CFO)</td>
          <td>New York</td>
          <td>64</td>
          <td>2010/06/09</td>
          <td>$725,000</td>
      </tr>
      <tr>
          <td>Gloria Little</td>
          <td>Systems Administrator</td>
          <td>New York</td>
          <td>59</td>
          <td>2009/04/10</td>
          <td>$237,500</td>
      </tr>
      <tr>
          <td>Bradley Greer</td>
          <td>Software Engineer</td>
          <td>London</td>
          <td>41</td>
          <td>2012/10/13</td>
          <td>$132,000</td>
      </tr>
      <tr>
          <td>Dai Rios</td>
          <td>Personnel Lead</td>
          <td>Edinburgh</td>
          <td>35</td>
          <td>2012/09/26</td>
          <td>$217,500</td>
      </tr>
      <tr>
          <td>Jenette Caldwell</td>
          <td>Development Lead</td>
          <td>New York</td>
          <td>30</td>
          <td>2011/09/03</td>
          <td>$345,000</td>
      </tr>
      <tr>
          <td>Yuri Berry</td>
          <td>Chief Marketing Officer (CMO)</td>
          <td>New York</td>
          <td>40</td>
          <td>2009/06/25</td>
          <td>$675,000</td>
      </tr>
      <tr>
          <td>Caesar Vance</td>
          <td>Pre-Sales Support</td>
          <td>New York</td>
          <td>21</td>
          <td>2011/12/12</td>
          <td>$106,450</td>
      </tr>
      <tr>
          <td>Doris Wilder</td>
          <td>Sales Assistant</td>
          <td>Sidney</td>
          <td>23</td>
          <td>2010/09/20</td>
          <td>$85,600</td>
      </tr>
      <tr>
          <td>Angelica Ramos</td>
          <td>Chief Executive Officer (CEO)</td>
          <td>London</td>
          <td>47</td>
          <td>2009/10/09</td>
          <td>$1,200,000</td>
      </tr>
      <tr>
          <td>Gavin Joyce</td>
          <td>Developer</td>
          <td>Edinburgh</td>
          <td>42</td>
          <td>2010/12/22</td>
          <td>$92,575</td>
      </tr>
      <tr>
          <td>Jennifer Chang</td>
          <td>Regional Director</td>
          <td>Singapore</td>
          <td>28</td>
          <td>2010/11/14</td>
          <td>$357,650</td>
      </tr>
      <tr>
          <td>Brenden Wagner</td>
          <td>Software Engineer</td>
          <td>San Francisco</td>
          <td>28</td>
          <td>2011/06/07</td>
          <td>$206,850</td>
      </tr>
      <tr>
          <td>Fiona Green</td>
          <td>Chief Operating Officer (COO)</td>
          <td>San Francisco</td>
          <td>48</td>
          <td>2010/03/11</td>
          <td>$850,000</td>
      </tr>
      <tr>
          <td>Shou Itou</td>
          <td>Regional Marketing</td>
          <td>Tokyo</td>
          <td>20</td>
          <td>2011/08/14</td>
          <td>$163,000</td>
      </tr>
      <tr>
          <td>Michelle House</td>
          <td>Integration Specialist</td>
          <td>Sidney</td>
          <td>37</td>
          <td>2011/06/02</td>
          <td>$95,400</td>
      </tr>
      <tr>
          <td>Suki Burks</td>
          <td>Developer</td>
          <td>London</td>
          <td>53</td>
          <td>2009/10/22</td>
          <td>$114,500</td>
      </tr>
  </tbody>
</table>

<div class="btns-block">
  <a class="btn-prev" href="#close">Prev</a>
  <a class="btn-next" href="#close">Next</a>

</div>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-01-30 17:45:33 +0000 UTC

TagBar的逻辑怎么写?

  • 0

你好!有以下构造:

  • popup-window带有类别列表的模态窗口(单击 时出现add-category);
  • categories-list- 放置所选类别的块。

逻辑如下:一个人按下按钮Add Category,出现一个模态窗口 - 在这里选择必要的类别,按下它Choose并且标有所选类别的类别出现在块字段中categories-list。每个块类别categories-list都有一个“删除”按钮 - 即。通过单击它,类别消失并:checked在模态中被删除。

一个很大的要求来解释如何做到这一点,因为jQuery我有一个级别addClass/ removeClass。

沙盒

$('.categories-list .add-category').click(function () {
  if ($('#select-category-popup').css('display') == 'none') {
    $('#select-category-popup').fadeIn();
  }
});
$('.close-modal-window').click(function () {
  $('#select-category-popup').fadeOut();
});
$('.choose-btn').click(function() {
  $('#select-category-popup').fadeOut();
})
.categories-list {
  padding: 10px 20px 0 20px;
  border-bottom: none;
  list-style: none;
  font-size: 0;
  line-height: 0;
  border: 1px solid #333;
}
.categories-list .category {
  display: inline-block;
  margin: 0 10px 10px 0;
  position: relative;
  border: 1px solid transparent;
  padding: 6px 32px 4px 10px;
  font-size: 14px;
  line-height: 14px;
  border-radius: 4px;
  cursor: pointer;
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
}
.categories-list .category.selected-category {
    background: #eeeeee;
}
.categories-list .category .category-icon {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
}
.categories-list .category .category-icon:after {
    content: '';
    font-family: 'FontAwesome';
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
    -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
    -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
    transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
}
.categories-list .category .category-icon.delete:after {
    content: '\f00d';
    padding-bottom: 1px;
    color: #aaa;
}
.categories-list .category .category-icon.add:after {
    content: '\f067';
    padding-top: 1px;
    color: #000;
}
.categories-list .category.add-category {
    background: #ffe69a;
}
.categories-list .category:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}
.categories-list .category.add-category:hover {
    border: 1px solid #fbbc25;
}
.categories-list .category.selected-category:hover {
    border: 1px solid #aaa;
    background: #eeeeee;
}
.categories-list .category.selected-category:hover:after {
}
.categories-list .category .category-icon.delete:hover:after {
    color: #333;
}


.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#select-category-popup {
  position: relative;
  display: none;
  width: 200px;
  margin: 30px auto;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.5);
  padding: 20px;
}
#select-category-popup .close-modal-window {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}


.choose-btn {
  width: 100%;
  margin-top: 20px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  color: red;
}
<script src="https://use.fontawesome.com/ea0959dcb8.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="categories-list">
  <li class="category selected-category">
    Action
    <span class="category-icon delete"></span>
  </li>
  <li class="category add-category">
    Add category
    <span class="category-icon add"></span>
  </li>
</ul>

<div id="select-category-popup" class="popup-window">
  <a class="close-modal-window">
    <i class="fa fa-times" aria-hidden="true"></i>
  </a>
  <div class="select-block--container">
    <ul class="category-list">
      <li class="category-item">
        <input id="category-action" type="checkbox">
        <label for="category-action">Action</label>
      </li>
      <li class="category-item">
        <input id="category-adventure" type="checkbox">
        <label for="category-adventure">Adventure</label>
      </li>
      <li class="category-item">
        <input id="category-card" type="checkbox">
        <label for="category-card">Card</label>
      </li>
    </ul>
    
    <span class="choose-btn">Choose</span>
  </div>
</div>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-01-27 03:59:24 +0000 UTC

将列表拆分为多列

  • 14

有一个列表,其中的项目应该垂直跟随,当到达固定高度的父级的底部边界时,它们应该被转移到一个新的列。

使用的实现column-count将列表项垂直放置,但列表分为三列,项数相同,您需要将第一列的高度填充为 100%。

.category-list {
  list-style: none;
  column-count: 3;
  height: 100px;
  border: 1px solid red;
}
.category-list li {
  page-break-inside: avoid;
  break-inside: avoid;
}
<ul class="category-list clearfix">
  <li class="category-item">1</li>
  <li class="category-item">2</li>
  <li class="category-item">3</li>
  <li class="category-item">4</li>
  <li class="category-item">5</li>
  <li class="category-item">6</li>
  <li class="category-item">7</li>
  <li class="category-item">8</li>
  <li class="category-item">9</li>
  <li class="category-item">10</li>
  <li class="category-item">11</li>
  <li class="category-item">12</li>
</ul>

html
  • 1 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-01-25 04:56:50 +0000 UTC

点击第三方区域返回原位

  • 0

你好!有两个块 - 当您单击第一个时第二个出现,当您单击您自己以外的任何区域时应该消失。

我的脚本无法正常工作 - 下拉框出现并立即消失......我知道必须有一定的顺序,因为 这两个功能同时执行,但我不知道如何设置它。请帮忙

另外,我不明白为什么当你点击一个方块时,.header出现的方块似乎会闪烁。理论上,它应该收到opacity: 1,然后它的值应该立即变为opacity: 0

$(function() {
  var searchformBlock = $('.menu');

  $('body').click(function() {
    if ($(searchformBlock).hasClass('active')) {
      $(searchformBlock).fadeOut().removeClass('active');
    }
  })

  $('.header').click(function () {
    $(searchformBlock).toggleClass('active');

    if ($(searchformBlock).hasClass('active')) {
      $(searchformBlock).fadeIn();
    } else {
      $(searchformBlock).fadeOut();
    }
  });
});
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-image: -webkit-linear-gradient(top, #fecf5e, #ffcc50);
  background-image: linear-gradient(to bottom, #fecf5e, #ffcc50);
  z-index: 101;
}
.menu {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  width: 300px;
  background: #a7a7a7;
  height: 30px;
  margin: 0 auto;
  z-index: 100;
  display: none;
  
  -moz-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -o-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  -webkit-transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
  transition: all 0.4s cubic-bezier(0.2, 0.57, 0.36, 0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header"></div>
<div class="menu"></div>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-01-22 02:44:50 +0000 UTC

取决于所选复选框的字段活动

  • 0

你好!例如,有两个复选框,android加上ios下面的两个多选 - 我们称它们为android-selectand ios-select(为了不麻烦连接插件,在示例中只有两个输入)。这两个复选框最初都处于选中状态。

条件如下:

  • 如果两个复选框都被选中,则两个输入都处于活动状态;
  • 如果未选中复选框,则两个输入均处于活动状态;
  • 如果选择android,ios-select则变为非活动状态,android-select- 分别为活动状态;
  • 如果选择ios,android-select不活动,ios-select- 活动。

我写了一个脚本,但不可能在其中反映整个场景(当两个复选框都被选中时,输入是不活动的),一般来说,我知道它是弯曲的/倾斜的,不应该这样做。请显示更正确和简洁的版本...

沙盒。

$(document).ready(function() {
  if ($('#android').is(':checked')) {
    $('#ios-select').addClass('inactive');
  } else {
    $('#ios-select').removeClass('inactive');
  }
});
$('#android').on('change', function() {
  if(this.checked) {
    $('#ios-select').addClass('inactive');
  } else {
    $('#ios-select').removeClass('inactive');
  }
});

$(document).ready(function() {
  if ($('#ios').is(':checked')) {
    $('#android-select').addClass('inactive');
  } else {
    $('#android-select').removeClass('inactive');
  }
});
$('#ios').on('change', function() {
  if(this.checked) {
    $('#android-select').addClass('inactive');
  } else {
    $('#android-select').removeClass('inactive');
  }
});
.checkbox-block {
  margin-bottom: 20px;
}
.multiselect-block > div {
  margin-bottom: 5px;
}
.multiselect-block input.inactive {
  opacity: .5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="checkbox-block">
  <input id="android" type="checkbox" checked>
  <label for="android">Android</label>
  
  <input id="ios" type="checkbox" checked>
  <label for="ios">iOS</label>
</div>
<div class="multiselect-block">
  <div>
    <input id="android-select" type="text" placeholder="android-select" >
  </div>
  <div>
    <input id="ios-select" type="text" placeholder="ios-select">
  </div>
</div>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Игорь
Asked: 2020-01-19 16:34:31 +0000 UTC

以 0.5 为增量舍入字段值

  • 1

你好!有一个数字字段,设置了最小值和最大值,步长为 0.5。请告诉我如何根据步骤对输入的值进行四舍五入。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="number" min="0" max="5" step="0.5" placeholder="1">

javascript
  • 1 个回答
  • 10 Views

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    我看不懂措辞

    • 1 个回答
  • Marko Smith

    请求的模块“del”不提供名为“default”的导出

    • 3 个回答
  • Marko Smith

    "!+tab" 在 HTML 的 vs 代码中不起作用

    • 5 个回答
  • Marko Smith

    我正在尝试解决“猜词”的问题。Python

    • 2 个回答
  • Marko Smith

    可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件?

    • 1 个回答
  • Marko Smith

    Python解析野莓

    • 1 个回答
  • Marko Smith

    问题:“警告:检查最新版本的 pip 时出错。”

    • 2 个回答
  • Marko Smith

    帮助编写一个用值填充变量的循环。解决这个问题

    • 2 个回答
  • Marko Smith

    尽管依赖数组为空,但在渲染上调用了 2 次 useEffect

    • 2 个回答
  • Marko Smith

    数据不通过 Telegram.WebApp.sendData 发送

    • 1 个回答
  • Martin Hope
    Alexandr_TT 2020年新年大赛! 2020-12-20 18:20:21 +0000 UTC
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5