主页 / user-256396

Black Fire's questions

Martin Hope
Black Fire
Asked: 2022-07-23 22:00:01 +0000 UTC
  • 0

有必要在段落中添加相应的文本。例如：第一个 - arr[0]，第二个 - arr[1]，第三个 - arr[2]，第四个 - arr[3]，第五个 - arr[4]

现在数组的最后一个元素被添加到所有内容中。怎么做才对？

let arr = ["aaa", "bbb", "ccc", "ddd", "eee"];

let description = document.querySelectorAll('.descr');
let res = Array.from(description);

res.map((item) => {
  arr.map((value) => {
    item.innerText = value;
  })
})
<p class="descr"></p>
<p class="descr"></p>
<p class="descr"></p>
<p class="descr"></p>
<p class="descr"></p>

javascript
Martin Hope
Black Fire
Asked: 2022-07-23 20:15:44 +0000 UTC
  • 0

对于每个数组，您需要执行自己的操作，具体取决于它们存储在哪个字段中。如果对象的键等于您需要的，如何检查 for..in 循环？

let data = {
    columns: ["a", "b", "c"],
    rows: ["d", "e", "f"]
}

for (let prop in data) {
    if(data.hasOwnProperty(prop)) { // здесь нужно проверить, что prop это columns
        ///
    } else if (data.hasOwnProperty(prop)) { // здесь нужно проверить, что prop это rows
      ///
    }
}

javascript
Martin Hope
Black Fire
Asked: 2020-10-03 21:43:52 +0000 UTC
  • 1

该程序会产生如下标记：

<ul>
< li>цвет: синий< / li>
< li > Материал: ПВХ< / li>
< li>Размер: 80 * 40см < / li>
< li>вес: 123 г< / li>
</ul>

以这种形式：

<ul>
<li>цвет: синий</li>
<li> Материал: ПВХ</li>
<li>Размер: 80 * 40см </li>
<li>вес: 123 г</li>
</ul>

问题：

  1. 如何完成以使>开始标签的右侧和结束标签的左侧<没有空格。
  2. 后面的第一个字母必须>大写，如果不是大写的话。
  3. 以前，通过单击“复制”按钮，所有内容都被复制到缓冲区，现在它不起作用。如何返回？

'use strict'
const inp = document.querySelector('#input');
const out = document.querySelector('#output');
const btn = document.querySelector('#fix');
const writeBtn = document.querySelector('#copy');
let pre_content = '';

btn.addEventListener('click', () => {
  const text = inp.value;
  output.innerText = text.replace(/<\s*(\/)?\s*([^>\s]+)\s*(\s[^>]*)?>/g, '<$1$2$3>');
  pre_content = output.textContent; 
});
writeBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(pre_content)
});
button {
    background: #22c1c3;
    border: none;
    border-radius: 25px;
    width: 150px;
    height: 45px
}
<button id="copy">Copy</button>
<hr/>
<textarea id="input" cols="75%" rows="10"></textarea>
<pre id=output></pre>
<hr/>
<button id="fix">Fix</button>

javascript
Martin Hope
Black Fire
Asked: 2020-10-02 23:48:31 +0000 UTC
  • 0

这个标记带有损坏的标签：

<ul>
< li>цвет: синий< / li>
< li > Материал: ПВХ< / li>
< li>Размер: 80 * 40см< / li>
< li>вес: 123 г< / li>
</ul>

输出应如下所示：

<ul>
<li>Цвет: синий</li>
<li>Материал: ПВХ</li>
<li>Размер: 80 * 40см</li>
<li>Вес: 123 г</li>
</ul>
<h3 class="section-title font-opensans">Puluz PU5201L 80x40см blue - купить< / h3>
< p class="section-content">Купить Фон для предметной съемки Puluz PU5201L 80x40см blue в специализированном магазине фото/видео гаджетов. Официальная гарантия от <a href="http://www.puluz.com/">производителя</a>. Бесплатная доставка. Просмотреть все фото/видео гаджеты: <a href="https://site.com">site.com< / a>< / p>

您需要删除开始标签中的所有空格，删除结束标签中的空格，删除标签左侧和右侧的空格。并且还将小写的第一个字母替换为>大写字母。

регулярные-выражения
Martin Hope
Black Fire
Asked: 2020-05-07 20:18:07 +0000 UTC
  • 0

底线是该函数要求选择器和文本示例。通过选择器查找页面上的元素，并将先前输入的文本附加到其文本内容的末尾。但也需要将嵌套样式对象中的样式应用于所选元素。我在示例中注释掉了三行，因为我知道什么会出错。因为如果嵌套对象中有更多样式，它将不起作用。

let modify = {
  selector: document.querySelectorAll(prompt("Enter selector", "")),
  text: prompt("Enter the text", ""),
  styles: {
    color: "green",
    ["font-weight"]: 700,
    ["font-style"]: "italic"
  }
};

let changeElem = item => {
  let {
    selector,
    ...rest
  } = modify;

  for (let elems of modify.selector) {
    elems.innerHTML = `${elems.innerHTML} ${modify.text}`;
    //elems.style.color = modify.styles.color;
    //elems.style["font-weight"] = modify.styles["font-weight"];
    //elems.style["font-style"] = modify.styles["font-style"];
  }
};

changeElem(modify);
<div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae, repellendus!</p>

  <ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Lorem ipsum dolor sit amet.</li>
  </ul>
  <span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span><span>Lorem ipsum. </span>
</div>

javascript
Martin Hope
Black Fire
Asked: 2020-02-24 06:55:15 +0000 UTC
  • -1

将鼠标悬停在文本上时如何更改文本颜色并同时更改背景图像？例如，到这个https://www.vulcaninc.com/hsdh/img/facebook.png

同时，如果您将鼠标悬停在第一个背景图像上，它会发生变化，同时文本的颜色也会发生变化。

也就是说，当您将鼠标悬停在文本或图像上时，不管哪个是第一个，您都需要更改两个元素的样式。 

.logo-float {
    float: left;
}

.logo-float::after {
    content: "";
    display: block;
    clear: both;
}

.logo {
    float: left;
    width: 46px;
    height: 44px;
    background: url("https://static.wixstatic.com/media/1d08c9_6a0b824050d94131a320c701e55ab49d~mv2.png_srz_46_44_85_22_0.50_1.20_0.00_png_srz");
    margin-right: 15px;
}

.logo-text {
    height: 44px;
    float: right;
    text-transform: uppercase;
    font-weight: 700;
    line-height: .95;
}

.logo-text span:first-child {
    font-size: 29px;
}

.logo-text span:last-child {
    font-size: 18px;
}
 <div class="logo-float">
                    <div class="logo"></div>
                    <div class="logo-text"><span>Lorem</span><br><span>ipsum</span></div>
                </div>

html
Martin Hope
Black Fire
Asked: 2020-07-04 01:35:14 +0000 UTC
  • 0

const inp = document.querySelector('#input');
const out = document.querySelector('#output');
const btn = document.querySelector('#fix');
const writeBtn = document.querySelector('#copy');

btn.addEventListener('click', () => {
  const text = inp.value;
  output.innerText = text.replace(/<\s*(\/)?\s*([^>\s]+)\s*(\s[^>]*)?>/g, '<$1$2$3>');  
});
writeBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(output)
});
<button id="copy">Copy</button>
<hr/>
<textarea id="input">
< p>12334</p>
<p >fjfg< / p>
<p attr="a b c">fjfg< / p>
<p attr="a b c" >fjfg< / p>
</textarea>

<pre id=output></pre>
<hr/>
<button id="fix">Fix</button>

首先，我单击fix，将损坏的尖括号替换为正确的尖括号，然后单击复制后，我需要将生成的标签内容复制<pre>到剪贴板。如何实施？我试图做某事，但它不起作用。

javascript
Martin Hope
Black Fire
Asked: 2020-04-02 03:16:36 +0000 UTC
  • 2

如何只在路径上加上引号，就像这里一样？在此处输入图像描述 有一个通用的实现，只有右边的引用需要对齐。

blockquote {
  position: relative;
  background: #fafafa;
  padding: 1rem;
  margin: 1rem;
  background: #fff;
  border: 2px solid #ccc;
}

cite span:first-child {
  color: #aeadad;
  font-style: normal;
}

cite span:last-child {
  color: black;
  font-weight: bold;
  font-style: normal;
}

blockquote:before {
  color: gray;
  position: absolute;
  top: -10px;
  left: -10px;
  background-color: white;
  text-align: center;
  width: 45px;
  height: 40px;
  color: gray;
  content: "\1F676";
  font-size: 4em;
  line-height: 1em;
}

blockquote:after {
  color: gray;
  background-color: white;
  width: 45px;
  height: 40px;
  position: absolute;
  text-align: center;
  bottom: -20px;
  right: -10px;
  content: "\1F677";
  font-size: 4em;
  line-height: 1.1em;
}
<blockquote>
<p>«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно  неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»</p>
<cite><span>Автор цитаты: </span><span>Альберт Эйнштейн</span></cite>
</blockquote>

html
Martin Hope
Black Fire
Asked: 2020-04-01 21:23:54 +0000 UTC
  • 3

有一个空白，如何将其变为图像中的状态并进行其他两个选项？

.sho_bq-background {
  background: #fafafa;
}

.sho_bq-background:before {
  color: #ff0054;
  content: "\1F676";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.2em;
  vertical-align: -.4em;
}

.sho_bq-background:after {
  color: #ff0054;
  position: relative;
  content: "\1F677";
  font-size: 4em;
  line-height: 0.1em;
  vertical-align: -0.6em;
}

cite span:first-child {
  color: #aeadad;
  font-style: normal;
}

cite span:last-child {
  color: black;
  font-weight: bold;
  font-style: normal;
}
<blockquote class="sho_bq-background">
<p>«Идеалами, освещавшими мой путь и сообщавшими мне смелость и мужество, были доброта, красота и истина. Без чувства солидарности с теми, кто разделяет мои убеждения, без преследования вечно  неуловимого объективного в искусстве и в науке жизнь показалась бы мне абсолютно пустой»</p>
<cite><span>Автор цитаты: </span><span>Альберт Эйнштейн</span></cite>
</blockquote>

html
Martin Hope
Black Fire
Asked: 2020-08-08 22:54:36 +0000 UTC
  • 2

如何使用 :not 选择器或 not() 方法从包装集中排除嵌套元素？有一个这样的结构：

<a class="link">
  <div>
    <img></img>
  </div>
  <i></i>
</a>

如何在不影响嵌套 i 的情况下使用 jQuery 选择 .link？粗略地说，这样当点击图标时，挂在 .link 上的同一个处理程序不起作用。我尝试这样的事情，但它不起作用：

$('.link:not(i)').click(function(e) {
}
javascript
Martin Hope
Black Fire
Asked: 2020-08-08 18:34:41 +0000 UTC
  • 0

这是一个灯箱，在大图像旁边有一个按钮，单击时灯箱是隐藏的，但由于某种原因，该按钮的处理程序不起作用。

$(document).ready(function (){   
   $('.lightbox_trigger').click(function(e) {
        e.preventDefault();
        var image_href = $(this).attr("href");

        if ($('#lightbox').length > 0) {

            $('.wrap').html('<img src="' + image_href + '" />');

            $('#lightbox').show();
        }

        else { 
            var lightbox = 
            '<div id="lightbox">' +
                                    '<div class="wrap">' +
                    '<img src="' + image_href +'" />' +
                        '</div>'+ '<button id="close">Закрыть</button>' +
            '</div>';

            $('body').append(lightbox);
        }

    });

    $('#close').bind('click', function() {
        $('#lightbox').hide();
    });
        });
javascript
Martin Hope
Black Fire
Asked: 2020-08-06 17:38:45 +0000 UTC
  • 0
function Animal(name) {
this.name = name;
}
Animal.prototype.getName = function () {
return this.name;
};

function Dog(name) {
Animal.apply(this, arguments);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
return 'Dog' + this.getName() + 'is barking';
};

var dog = new Dog('Aban');
alert(dog.getName() === 'Aban');
alert(dog.bark() === 'Dog Aban is barking');
javascript
Martin Hope
Black Fire
Asked: 2020-07-10 02:26:12 +0000 UTC
  • 0

一般来说，元素的背景图片具有::before制作的半透明阴影效果。当改变浏览器窗口的宽度时，背景图片适配，背景保持固定高度，但在全屏时，由于 background-size: contain ，背景在高度上小于阴影（图片大于阴影）我的显示器）。如何让阴影效果与图像相适应，好吧，在全屏的情况下，恰好在图像上？这是另一个更好理解的例子： https ://codepen.io/Black_Fire/pen/OgBrRO

    header {
  background: url('../img/bg-header.jpg') no-repeat center top;
  -webkit-background-size: contain;
          background-size: contain;
  position: relative;
  height: 810px;
  text-align: center;
}
header::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 60, 0.671);
  content: '';
  z-index: 100;
}
css