RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

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

Gleb Pristupa's questions

Martin Hope
Gleb Pristupa
Asked: 2020-12-18 19:31:13 +0000 UTC

在 VueJs 模式中重复数据

  • 0

我不明白如何做到这一点,以便当您单击按钮打开模态框时,例如第二个对象,模态框会打开同一个对象的数据。 https://codepen.io/Glebmak/pen/wvBgeVG

new Vue({
	el: '#app',
	data () {
		return {
			showModal: false,
			cands: [
				{ firstName: 'John', lastName: 'Doe'},
        { firstName: 'Flow', lastName: 'Obama'},
        { firstName: 'Kanye', lastName: 'West'}
			],
		}
	},
})
#app {
  font-family: Open Sans;
}
section {
  max-width: 920px;
  margin: 0 auto;
}
.title {
  text-align: center;
}
.candidates {
  margin: 0 auto;
  tbody {
    tr {
      td {
        padding-right: 16px;
        img {
          width: 50px;
          border-radius: 50%;
        }
      }
    }
  }
}
.overlay {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  position: relative;
  width: 300px;
  z-index: 9999;
  margin: 0 auto;
  padding: 20px 30px;
  background-color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section>
    <table class="candidates">
      <thead>
        <tr>
          <th>Name</th>
          <th>Surname</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(cand, index) in cands" :key="index">
          <td>{{ cand.firstName }}</td>
          <td>{{ cand.lastName }}</td>
          <td><button @click="showModal = true">View</button></td>
        </tr>
      </tbody>
    </table>
    <div class="overlay" v-if="showModal" @click="showModal = false"></div>
    <div class="modal" v-if="showModal">
      <div class="modal-contant" v-for="(cand, index) in cands" :key="index">
        <img src="" alt="" />
        <div>{{ cand.firstName }}</div>
        <div>{{ cand.lastName }}</div>
      </div>
      <button class="close" @click="showModal = false">Close</button>
    </div>
  </section>
</div>

html
  • 1 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-11-26 20:16:20 +0000 UTC

响应带有元素的块

  • 2

我需要对此块进行自适应,使其不会损坏。 https://codepen.io/Glebmak/pen/JjjQEgo

  • 缩进的问题,因为 我指出,每个第 4 个元素的右侧都会有一个缩进,当然,您可以调整所有内容以适应每个像素,但这不是很符合语法。
  • space-between 的问题,如果一行中有 2 个元素,那么元素将被压向右侧和左侧是合乎逻辑的。

我尝试了不同的方法,指定了元素 calc(16.66%) 的宽度等。

.container {
  max-width: 420px;
  border: 1px solid #1b559e;
}
.fix__time {
    padding-top: 8px;
    margin: 8px 26px 0;
    border-top: 1px solid #dde0e3;
    text-align: center;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0;
}

li {
  list-style-type: none;
  margin: 0 12px 16px 0;
}

.fix__time-btn {
    height: 32px;
    width: 72px;
    line-height: 32px;
    border-radius: 4px;
    color: #fff;
    background-color: #1b559e;
}
<div class="container">
  <div class="fix__time">
    <ul>
      <li><div class="fix__time-btn">15:30</div></li> 
      <li><div class="fix__time-btn">16:30</div></li> 
      <li><div class="fix__time-btn none">—</div></li> 
      <li><div class="fix__time-btn none">—</div></li> 
      <li><div class="fix__time-btn">17:30</div></li> 
      <li><div class="fix__time-btn">18:30</div></li> 
      <li><div class="fix__time-btn">19:30</div></li> 
      <li><div class="fix__time-btn">20:30</div></li>
    </ul>
  </div>
</div>

html
  • 1 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-10-19 16:29:24 +0000 UTC

模态花式框

  • 0

早上好,为什么单击第二个按钮无法打开模态?

$("#btnModal").fancybox();
$(".btn-modal").on("click", function () {
    $("#form-modal").fadeOut("fast", function () {
        $(this).before("<p><strong>Вы получили выгоду!</strong></p>");
        setTimeout("$.fancybox.close()", 1000);
    });
});
#feedback {
    display: none;
}

.fancybox-content {
    max-width: 430px;
    padding: 65px 65px 32px 65px;

    form {
        text-align: center;

        h1 {
            font-size: 24px;
            line-height: 48px;
            font-weight: 500;
            margin-bottom: 20px;
        }
    }
}
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<link href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" rel="stylesheet"/>


<button href="#feedback" id="btnModal">Получить выгоду 1</button>
<button href="#feedback" id="btnModal">Получить выгоду 2</button>

<div id="feedback" class="modal">
    <form id="form-modal">
        <h1>Получите все выгоды!</h1>
    </form>
</div>

html
  • 1 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-10-16 16:28:24 +0000 UTC

打开 Sans 字体问题

  • 1

早上好。我正在制作一个网站,它有一个带有 Open Sans 字体和 c font-weight: 600 的标题在此处输入图像描述

这是来自另一个站点,带有 Open Sans 字体和 font-weight: 700 的文本在此处输入图像描述

问题是为什么在另一个网站上,粗体饱和度看起来比我的粗体要薄。

html
  • 1 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-05-22 00:09:27 +0000 UTC

点击打开子菜单

  • 0

打开所有 ul.catalog__submenu。如何在不创建新类的情况下避免这种情况。我寻求有关逐步打开子菜单的帮助

$(".catalog__open").on("click", function() {
  $(".catalog__submenu").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="catalog__open">1</a>
    <ul class="catalog__submenu" style="display:none">
      <li><a href="#">2</a>
        <ul class="catalog__submenu" style="display:none">
          <li><a href="#">2.1</a></li>
          <li><a href="#">2.2</a></li>
          <li><a href="#">2.3</a></li>
        </ul>
      </li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">6</a></li>
    </ul>
  </li>
  <li><a href="#" class="catalog__open">7</a>
    <ul class="catalog__submenu" style="display:none">
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">10</a></li>
    </ul>
  </li>
</ul>

javascript
  • 1 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-02-26 18:11:45 +0000 UTC

转换为 SCSS

  • 0

将此代码从 CSS 转换为 SCSS、使用 mixin 或扩展需要什么?

main > nav, main > div {
  display: inline-block;
}

此选项是否合适,在这种情况下是否正确?

@mixin default {
  display: inline-block;
}
  
main > nav {
  @include default;
}
  
main > div {
  @include default;
}

scss
  • 1 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-01-30 20:54:27 +0000 UTC

单击更改背景颜色

  • 0

您需要找到div页面上的所有内容并向每个("click"). 并且当您单击div背景颜色时会发生变化。告诉我你做错了什么

let elem1 = document.querySelectorAll('box');

elem1.forEach(function(document) {
  document.addEventListener("click", function() {
    this.style.backgroundColor = "black";
  });
});
.box {
  margin: 10px;
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><br>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

javascript
  • 2 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-12-01 04:26:01 +0000 UTC

使用选择器

  • 3

大家好,告诉我如何正确注册选择器,使所有对象 6 和对象 8.9 不在另一个框架中。

结果应该如何

.content .right-bar div {
  margin: 10px;
  padding: 10px;
  border: 2px solid black;
  font-size: 20px;
}
<div class="content">
  <div class="left-bar">
    <div class="four">4</div>
    <div class="seven">7</div>
  </div>
  <div class="right-bar">
    <div class="five">5</div>
    <div class="center">
      <div>6</div>
      <div>6</div>
      <div>6</div>
      <div>6</div>
      <div>6</div>
      <div>6</div>
    </div>
    <div class="bottom">
      <div class="eight">8</div>
      <div class="nine">9</div>
    </div>
  </div>
</div>

html
  • 2 个回答
  • 10 Views
Martin Hope
Gleb Pristupa
Asked: 2020-11-13 20:59:07 +0000 UTC

使用悬停时更改元素的配色方案

  • 0

“你能告诉我怎么做,当你将鼠标悬停在一个元素上时,它会改变颜色,而其余的元素会变暗。”

好吧,我会更轻松,有一个菜单,其中有 5 个元素,悬停在光标的一个元素上,它为我改变颜色,菜单中的其余元素改变颜色。

没有进展,我明白原理。如果它更容易,那么这里是 5 个元素的列表

<div class="nav">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
html
  • 2 个回答
  • 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