VanilJS提出的问题

VanilJS

Asked: 2022-08-09 19:55:18 +0000 UTC

为什么 mobx 不更新动态输入的值？

0

输入成功将数据写入mobx
删除输入时，mobx 成功删除数据。
但为什么剩余输入的值保持不变？

例子。
期望值为 3 但保持为 1
沙箱，代码简单

VanilJS

Asked: 2020-06-29 22:26:25 +0000 UTC

如何选择最多 3 张卡，使其余卡处于非活动状态，将所有内容写入本地存储并显示加载时的所有内容？

1

您最多需要选择 3 张卡。
当达到限制时，关闭其余卡。
按 ID 的卡片被写入 localStorage。并且在加载页面时，我们按原样安排选择。
问题是加载时，并非所有非活动卡都变为非活动状态。并且您还可以选择更多限制。这似乎是一项初级任务，但它变成了不可能的事情。

jsFiddle https://jsfiddle.net/Vaniljs/19muw4d7/59/

const limit = 3;
var arrForCheckedItem = []; // массив для сохранения el в localStorage

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('product')) {
    if (!t.classList.contains('unchecked')) {
        arrForCheckedItem = []; // обнуляем массив, чтобы не копился
      t.classList.toggle('checked');
      document.querySelectorAll('.product.checked').forEach(i => {
    if (i.classList.contains('checked')) {
            arrForCheckedItem.push(i.dataset.productid); // Сохраняем выбранные el в массив
        }
    })
      localStorage.setItem('checked_items', arrForCheckedItem); // Сохраняем массив в localStorage
      const allChecked = document.querySelectorAll('.product.checked').length >= limit;
      document.querySelectorAll('.product:not(.checked)').forEach(n => {
        n.classList.toggle('unchecked', allChecked);
      });
    }
  }
  console.log(localStorage.getItem('checked_items')); // Проверка содержимого в localStorage
});




// ОТМЕЧАЕМ ВЫБРАННЫЕ И НЕВЫБРАННЫЕ ПРИ ЗАГРУЗКЕ СТРАНИЦЫ

window.addEventListener('load', () => {
    let arrFromStorage = localStorage.getItem('checked_items'); // выгружаем данные из localStorage
  let allCards = document.querySelectorAll('.product.slick-slide'); // выбираем все карточки
    if (arrFromStorage.length) { // если localStorage существует
        arrFromStorage.split(',').map(itemFromStorage => { // режем строку из localStorage в массив и перебираем
            allCards.forEach(itemProduct => {
                if (itemProduct.dataset.productid == itemFromStorage) { // если у карточки такой же id - отмечаем ее выбранной
                    itemProduct.classList.add('checked')
                } 
        if (document.querySelectorAll('.product.slick-slide.checked').length >= limit && itemProduct.dataset.productid != itemFromStorage) { // если у карточки не такой же id b выбранных меньше лимита - отмечаем ее не выбранной
                    itemProduct.classList.add('unchecked')
                }
            })
        })
    }
})

div:not(.product) {
    display: flex;
}

.product {
    display: block;
    width: 100px;
    height: 100px;
    margin: 20px;
    background-color: gray;
    border: 2px solid gray;
    cursor: pointer;
}

.product.checked {
    border: 2px solid green;
    background-color: lightgray;
}

.product.unchecked {
    border: 2px solid red;
    background-color: darkgray;
    cursor: not-allowed;
}

<div>
  <div class="product slick-slide" data-productid="1">1</div>
  <div class="product slick-slide" data-productid="2">2</div>
  <div class="product slick-slide" data-productid="3">3</div>
  <div class="product slick-slide" data-productid="4">4</div>
  <div class="product slick-slide" data-productid="5">5</div>
  <div class="product slick-slide" data-productid="6">6</div>
</div>

VanilJS

Asked: 2020-04-06 21:04:58 +0000 UTC

如何在没有第一个参数post的情况下解析php中的json对象？

0

使用json字符串发送数据。

async function sender() {
        const url = "file.php";
        try {
            const response = await fetch(url, {
                method: 'POST',
                //body: ('param=' + JSON.stringify(object)),
                body: JSON.stringify(object), // {"name":"John","surname":"Smith"}
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            });
            const json = await response.text();
            console.log(json);
        } catch (error) {
            console.error('Ошибка:', error);
        }
    }

var_dump($_POST)输出

array(1) {
  ["{"name":"John","surname":"Smith"}"]=>
  string(0) ""
}

如何输出单独的键和单独的值？
继续经营它们。

像这样尝试：

echo $_POST; // Array 
echo $_POST[0]; // пусто
echo $_POST[name]; // пусто
echo $_POST->name; // пусто
echo json_decode($_POST); //  json_decode() expects parameter 1 to be string, array given
echo json_encode($_POST); // Array{"{\"name\":\"John\",\"surname\":\"Smith\"}":""}

ps 带参数发送前，一切正常

body: ('param=' + JSON.stringify(object)) // param={"name":"John","surname":"Smith"}

并像这样输出

$param = json_decode($_REQUEST["param"]);
echo $param->name; // John

VanilJS

Asked: 2020-04-03 18:28:41 +0000 UTC

如何防止删除输入中的某个部分？

0

通过一个按钮将各种国家代码插入输入电话中。这部分不能手动指定，
如何防止这段代码被删除？例如，可能有“+7_”或“+987_”这样的代码

*没有在隐藏存根的布局中堆积来模拟输入的开头，只有1个裸输入。

由于某种原因，正则表达式不起作用。

 document.querySelector('#phone').addEventListener('keydown', valid);
 document.querySelector('#phone2').addEventListener('keydown', valid);
 
 
 function valid(event) {
 	if (this.value === /^\+\d+\s/ && event.key === 'Backspace') { 
  	event.preventDefault() 
  }
 }

<input type="text" id="phone" value="+7 ">
<input type="text" id="phone2" value="+987 ">

VanilJS

Asked: 2020-02-25 02:42:18 +0000 UTC

如何修复浮动中的浮动？

1

如何调整浮动中的换行，以便一次没有填充一个单词？
比如说，只有 1-2 行

.parent {
  display: block;
  width: 250px;
  border: 1px solid gray;
}
.parent div {
  display: inline-block;
  float: left;
  padding: 5px;
  background-color: gray;
  margin: 5px
}
.parent p {
  text-align: justify
}

<div class="parent">
  <div>Lorem</div>
  <div>consectetur</div>
  <div>velu</div>
  <div>Blanditiis</div>
  <div>nulla</div>
  <div>am</div>

<p>Ai Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ducimus atque maxime dolorum fugit beatae, veritatis quam? Blanditiis cupiditate minima nulla magnam ipsa totam dolorum vel, quaerat nobis, molestiae maiores.</p>
</div>

VanilJS

Asked: 2020-12-27 02:57:20 +0000 UTC

如果页面上没有元素，如何忽略 addEventListener 错误？

2

有 1 个通用的file.js，其中编写了整个站点的功能。

如果第 1 页上有按钮，则file.js可以正常工作，但在第二页上，此按钮可能没有，并且会addEventListener给出元素null和file.js停止工作的错误。

目前，绕过是将所有内容包装在 if 中。

if(el) {
   el.addEventListener('click', () => alert(1))
}

有没有更简洁的方法来对元素的缺失保持沉默？

或者唯一的选择是把所有东西都排成一排if？这将大大增加代码量。

addEventListener如果元素不存在则出错：

未捕获的类型错误：无法读取 null 的属性“addEventListener”

VanilJS

Asked: 2020-11-27 17:56:45 +0000 UTC

window.resize 时如何从菜单中删除闪烁或如何适应动态菜单？

1

动态菜单脚本（不同数量的项目）

如果菜单不适合（比容器宽） - 激活移动视图。
如果菜单适合（比容器窄） - 删除移动视图。

如何去除闪烁？
或者在这种情况下为动态菜单编写脚本会更正确吗？

脚本代码（尝试调整页面大小，菜单会闪烁）-

var headerWrapper = document.querySelector('.header-wrapper'),
        headerContainer = document.querySelector('.header .container'),
        logo = document.querySelector('.logo'),
        nav = document.querySelector('nav'),
        headerBtn = document.querySelector('.header .btn'),
        gamburger = document.querySelector('.gamburger-wrapper');

    
    window.onload = mobileMenu; // Сравниваем ширину при загрузке
    window.addEventListener('resize', mobileMenu); // Сравниваем ширину при загрузке

    
    function mobileMenu() {
        // Если ширина контейнера меньше, чем сумма ширин блоков
        if (headerContainer.offsetWidth < (logo.offsetWidth + nav.offsetWidth + headerBtn.offsetWidth)) {
            
            // true - активируем мобильный вид
            headerWrapper.classList.add('mobile')
            
            // false - убираем мобильный вид
        } else {
            headerWrapper.classList.remove('mobile')
        }
    }

    
    // Нажатие на гамбургер меню
    gamburger.addEventListener('click', () => {
        nav.classList.toggle('active')
    })

*,
    :after,
    :before {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    :focus {
        outline: none
    }

    .headerWrapper {
        padding: 0;
        margin: 0;
        background-color: #f2f2f2
    }

    p {
        color: #000
    }

    ul {
        list-style: none
    }

    a {
        color: inherit;
        text-decoration: none
    }

    .btn,
    a {
        cursor: pointer
    }

    .btn {
        color: #838b93;
        padding: 5px 16px 4px;
        margin: 0;
        height: 32px;
        background-color: #fff;
    }

    .btn,
    .btn:hover {
        -webkit-transition: all .3s;
        transition: all .3s
    }

    .btn:hover {
        color: #485d67;
    }

    .container {
        height: 100%;
        max-width: 960px;
        padding: 0 15px;
        margin: 0 auto;
        position: relative
    }

    .header {
        display: block;
        width: 100%;
        height: 40px;
        padding: 0;
        margin: 0;
        position: relative;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
    }

    .header .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .header .container nav {
        margin-left: auto
    }

    .header ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        height: 100%;
        width: 100%;
        color: #838b93;
        padding: 0;
        margin-right: 20px
    }

    .header ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        -webkit-box-flex: 0;
        -ms-flex: 0;
        flex: 0;
        padding: 5px 14px
    }

    .header ul li:hover {
        cursor: pointer;
        color: #485d67
    }

    .header .logo {
        display: block;
        min-width: 105px;
        font-weight: 700;
        font-size: 20px;
        color: #444
    }

    .header .logo span {}

    .mobile .btn {
        margin-right: 0
    }

    .mobile .header nav {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        background-color: #fff
    }

    .mobile .header nav ul {
        display: block;
        margin-top: 0;
        margin-bottom: 0;
        -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, .1);
        box-shadow: -2px 2px 4px rgba(0, 0, 0, .1)
    }

    .mobile .header nav ul li {
        display: block;
        padding: 10px;
        border-left: 2px solid transparent
    }

    .mobile .header nav ul li:hover {
        background-color: #f2f2f2;
        border-left: 2px solid #838b93
    }

    .mobile .header .active {
        display: block
    }

    .mobile .gamburger-wrapper {
        display: block;
        cursor: pointer;
        height: 30px;
        width: 30px;
        position: relative
    }

    .mobile .gamburger {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #777;
        position: absolute;
        top: 45%;
        left: 0
    }

    .mobile .gamburger:after {
        top: 7px
    }

    .mobile .gamburger:after,
    .mobile .gamburger:before {
        content: "";
        display: block;
        width: 30px;
        height: 3px;
        position: absolute;
        background-color: #777;
        left: 0
    }

    .mobile .gamburger:before {
        bottom: 7px
    }

<div class="header-wrapper">
    <div class="header">
        <div class="container">
            <div class="logo">
                <span>Лого</span>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Меню1</a></li>
                    <li><a href="#">Меню2</a></li>
                    <li><a href="#">Меню3</a></li>
                    <li><a href="#">Меню4</a></li>
                </ul>
            </nav>
            <button class="btn">Кнопка</button>
            <div class="gamburger-wrapper">
                <div class="gamburger"></div>
            </div>
        </div>
    </div>
</div>

HTML 文件示例https://yadi.sk/d/UKDYOJpPczu8FQ

VanilJS

Asked: 2020-08-31 21:13:25 +0000 UTC

为什么数据库中的最后一个元素输出 NULL（RedBeanPHP 使用）？

0

数据库有一张表

列具有这些特征

该命令打印所需的行

echo R::load('name_table', 113);  //  выводит строку из таблицы name_table, которая содержит значение 113
//ВЫВОДИТ ПО ПОРЯДКУ: {"id":"113","name_pay_link":"Мой первый товар","price_pay_link":"154","url_pay_link":"https:www.google.ru","idUser":"104"}

为什么最后一列可能不显示？idUser 依次显示

该行每一列的值

$uniq_id= R::load('name_table', 113);  // читаем строку из таблицы name_table, где нашли значение 113

echo $uniq_id->id; // ВЫВОДИТ 113
echo $uniq_id->name_pay_link; // ВЫВОДИТ Мой первый товар
echo $uniq_id->price_pay_link; // ВЫВОДИТ 154
echo $uniq_id->url_pay_link; // ВЫВОДИТ https://www.google.ru
echo $uniq_id->idUser; // ВЫВОДИТ ПУСТОЕ ЗНАЧЕНИ, var_dump говорит NULL

ps var_dump($uniq_id) 给出以下

VanilJS

Asked: 2020-03-30 22:35:06 +0000 UTC

如何平滑替换 val() 而不是整个元素？

0

如何进行价值的平稳置换？不是整个街区。

$('.wpcf7-submit').click(function() {
  let thisButton = $(this);

  // Исчезает весь элемент
  thisButton.val('').fadeOut(500);

  // Вот это должно плавно появиться
  thisButton.val("Отправляется").fadeIn(500);

  setTimeout(function() {

    // После 2х секунд, value плавно появляется обратно
    thisButton.val("Отправить").fadeIn(500);
  }, 2000);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input class="wpcf7-submit" type="submit" value="Отправить">

VanilJS

Asked: 2020-10-31 22:40:23 +0000 UTC

为什么图像替换不取决于所选的选择？

1

在两个程式化选择的帮助下，有一个类似于颜色构造函数的东西。
为什么图片没有变成选择中选中的那张？
PS 任务已解决。沙盒和代码示例中的正确解决方案。谁应该接受。带有指向 jsFiddle 沙箱的图像生成器链接的风格化选择

// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА МАТЕРИАЛА
$(document).ready(function (){
    $('#materialColor').wrap('<div class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#materialColor').parent().prepend(function() {
        return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#materialColor').parent().children('span').width($('#materialColor').width());
    $('#materialColor').css('display', 'none');
    $('#materialColor').parent().append('<ul class="select_inner"></ul>');
    $('#materialColor').children().each(function(){
        var opttext = $(this).text();
        var optval = $(this).val();
        $('#materialColor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
    });
    $('#materialColor').parent().find('li').on('click', function (){
        var cur = $(this).attr('id');
        $('#materialColor').parent().children('span').text($(this).text());
        $('#materialColor').children().removeAttr('selected');
        $('#materialColor').children('[value="'+cur+'"]').attr('selected','selected');
        console.log($('#materialColor').children('[value="'+cur+'"]').text());

        // вызов скрипта смены картинки материала
        onChangeSelect();
    });
    $('#materialColor').parent().on('click', function (){
        $(this).find('ul').slideToggle('fast');
    });
});


// СТИЛИЗАЦИЯ СЕЛЕКТА ВЫБОРА ЦВЕТА КАНТА
$(document).ready(function (){
    $('#kantcolor').wrap('<div id="select_wrapper" class="select_wrapper"> <i id="arrowChevron" class="fa fa-chevron-down"></i></div>')
    $('#kantcolor').parent().prepend(function() {
        return '<span>'+ $(this).find(':selected').text() +'</span>'
    });
    $('#kantcolor').parent().children('span').width($('#kantcolor').width());
    $('#kantcolor').css('display', 'none');
    $('#kantcolor').parent().append('<ul class="select_inner"></ul>');
    $('#kantcolor').children().each(function(){
        var opttext = $(this).text();
        var optval = $(this).val();
        $('#kantcolor').parent().children('.select_inner').append('<li id="' + optval + '">' + opttext + '</li>');
    });
    $('#kantcolor').parent().find('li').on('click', function (){
        var cur = $(this).attr('id');
        $('#kantcolor').parent().children('span').text($(this).text());
        $('#kantcolor').children().removeAttr('selected');
        $('#kantcolor').children('[value="'+cur+'"]').attr('selected','selected');
        console.log($('#kantcolor').children('[value="'+cur+'"]').text());

        // вызов скрипта смены картинки канта
        onChangeSelects();
    });
    $('#kantcolor').parent().on('click', function (){
        $(this).find('ul').slideToggle('fast');

    });
});

// ЗАМЕНА КАРТИНКИ МАТЕРИАЛА
function onChangeSelect() {

    // читаем значение выбранного селекта у материала
    selectedMaterial = $('#materialColor').val();

    // скрываем предыдущую выбранную картинку материала
    var materialNode = document.querySelector('.costruct-karpet'); // ищем ноду
    materialNode.querySelectorAll('.material').forEach(n => n.classList.remove('selected'));

    // Сравнение содержимого выбранного селекта у канта. Какой цвет выбран, такая картинка появилась
    switch (selectedMaterial) {
        case 'black':
            materialNode.querySelector('#black').classList.add('selected');
            break;
        case 'gray':
            materialNode.querySelector('#gray').classList.add('selected');
            break;
        case 'beige':
            materialNode.querySelector('#beige').classList.add('selected');
            break;
        case 'red':
            materialNode.querySelector('#red').classList.add('selected');
            break;
        case 'brown':
            materialNode.querySelector('#brown').classList.add('selected');
            break;
        case 'blue':
            materialNode.querySelector('#blue').classList.add('selected');
            break;
        case 'orange':
            materialNode.querySelector('#orange').classList.add('selected');
            break;
        case 'purple':
            materialNode.querySelector('#purple').classList.add('selected');
            break;
        case 'green':
            materialNode.querySelector('#green').classList.add('selected');
            break;
        case 'white':
            materialNode.querySelector('#white').classList.add('selected');
            break;
        case 'yellow':
            materialNode.querySelector('#yellow').classList.add('selected');
            break;
    }
}


// ЗАМЕНА КАРТИНКИ КАНТА
function onChangeSelects() {

    // читаем значение выбранного селекта канта
    selectedKant = $('#kantcolor').val();

    // скрываем предыдущую выбранную картинку канта
    var kantNode = document.querySelector('.costruct-karpet'); // ищем ноду
    kantNode.querySelectorAll('.kant').forEach(n => n.classList.remove('selected'));

    // Сравнение содержимого выбранного селекта у канта. Какой цвет выбран, такая картинка появилась
    switch (selectedKant) {
        case 'kblack':
            kantNode.querySelector('#kblack').classList.add('selected');
// вот эта часть рабочая, все что ниже можно переписать основываясь на этом примере
            break;
        case 'kgray':
            kantNode.querySelector('#kgray').classList.add('selected');
            break;
        case 'kdgray':
            kantNode.querySelector('#kdgray').classList.add('selected');
            break;
        case 'kbeige':
            kantNode.querySelector('#kbeige').classList.add('selected');
            break;
        case 'kred':
            kantNode.querySelector('#kred').classList.add('selected');
            break;
        case 'kbrown':
            kantNode.querySelector('#kbrown').classList.add('selected');
            break;
        case 'kblue':
            kantNode.querySelector('#kblue').classList.add('selected');
            break;
        case 'kdblue':
            kantNode.querySelector('#kdblue').classList.add('selected');
            break;
        case 'korange':
            kantNode.querySelector('#korange').classList.add('selected');
            break;
        case 'kpurple':
            kantNode.querySelector('#kpurple').classList.add('selected');
            break;
        case 'kgreen':
            kantNode.querySelector('#kgreen').classList.add('selected');
            break;
        case 'kwhite':
            kantNode.querySelector('#kwhite').classList.add('selected');
            break;
        case 'kyellow':
            kantNode.querySelector('#kyellow').classList.add('selected');
            break;
    }
}

.costruct-karpet {
    position: relative;
    display: block;
    height: 225px;
    width: 180px;
    margin: auto;
}

.costruct-karpet img {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

.selected {
    display: block !important;
}

/* Селект */
/*select start*/
.select_wrapper i {
    color: #757575;
    float: right;
    margin-top: -16px;
    display: block;
    transition: 0.3s ease-in-out;
}

.rotate {
    transform: rotate(180deg);
    animation-duration: 5s;
    transition: 0.3s ease-in-out;
}

.select_wrapper {
    border: 1px solid #bfbfbf;
    font: 14px/18px Acrom;
    color: #000;
    width: 200px;
        padding: 7px 12px 11px 33px;
    margin-bottom: 15px;
    display: inline-block;
    
    cursor: pointer;
    position: relative;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}
.select_wrapper:focus {
    border: 1px solid #235D81;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -ms-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}
.select_wrapper span {
    display: block;
    margin: 7px 0 0 0;
    width: 100% !important;
}
.select_wrapper .select_inner {
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: #687278;
    display: none;
    position: absolute;
    left: 0;
    top: 38px;
    width: 99%;
    z-index: 3;
    border: 1px solid #fff;
    height: 400px;
    overflow: auto;
}
.select_wrapper ul {
    padding-left: 0;
    margin-left: 0;
}
.select_wrapper .select_inner li {
    list-style: none;
    border-bottom: 1px solid #eee;
    padding: 10px 20px;
}
.select_wrapper .select_inner li:hover {
    background: #eee;
}
.select_wrapper .select_inner li:last-child {
    border: none;
    border-radius: 0 0 5px 5px;
}
.select_wrapper .select_inner li:first-child {
    border-radius: 5px 5px 0 0;
}
/*select end*/

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Селект для цвета материала -->
<select name="materialColor" class="materialColor" id="materialColor">
		    <option value="" selected="selected">Выберите цвет материала</option>
		    <option value="black">Черный</option>
		    <option value="gray">Серый</option>
		    <option value="beige">Бежевый</option>
		    <option value="red">Красный</option>
		    <option value="brown">Коричневый</option>
		    <option value="blue">Синий</option>
		    <option value="orange">Оранжевый</option>
		    <option value="purple">Фиолетовый</option>
		    <option value="green">Салатовый</option>
		    <option value="white">Белый</option>
		    <option value="yellow">Желтый</option>
</select>
    
<!-- Селект для цвета канта -->
<select name="kantcolor" class="kantcolor" id="kantcolor">
		    <option value="" selected="selected">Выберите цвет канта</option>
		    <option value="kblack">Черный</option>
		    <option value="kgray">Серый</option>
		    <option value="kdgray">Темно-серый</option>
		    <option value="kred">Красный</option>
		    <option value="kdblue">Темно-синий</option>
		    <option value="kblue">Синий</option>
		    <option value="kbeige">Бежевый</option>
		    <option value="kwhite">Белый</option>
		    <option value="kbrown">Коричневый</option>
		    <option value="korange">Оранжевый</option>
		    <option value="kgreen">Салатовый</option>
		    <option value="kwhite">Белый</option>
		    <option value="kyellow">Желтый</option>
		    <option value="kpurple">Фиолетовый</option>
</select>

<!-- Контейнер с наложениями картинок -->
<div class="costruct-karpet">
          <!-- Картинки материала -->
          <img class="material selected" id="black" src="http://autogoods.su/lend/images/colors/black.png" alt="">
          <img class="material" id="gray" src="http://autogoods.su/lend/images/colors/gray.png" alt="">
          <img class="material" id="beige" src="http://autogoods.su/lend/images/colors/beige.png" alt="">
          <img class="material" id="red" src="http://autogoods.su/lend/images/colors/red.png" alt="">
          <img class="material" id="brown" src="http://autogoods.su/lend/images/colors/brown.png" alt="">
          <img class="material" id="blue" src="http://autogoods.su/lend/images/colors/blue.png" alt="">
          <img class="material" id="orange" src="http://autogoods.su/lend/images/colors/orange.png" alt="">
          <img class="material" id="purple" src="http://autogoods.su/lend/images/colors/purple.png" alt="">
          <img class="material" id="green" src="http://autogoods.su/lend/images/colors/green.png" alt="">
          <img class="material" id="white" src="http://autogoods.su/lend/images/colors/white.png" alt="">
          <img class="material" id="yellow" src="http://autogoods.su/lend/images/colors/yellow.png" alt="">
          
          <!-- Картинки канта -->
          <img class="kant" id="kblack" src="http://autogoods.su/lend/images/colors/kblack.png" alt="" >
          <img class="kant" id="kyellow" src="http://autogoods.su/lend/images/colors/kyellow.png" alt="" >
          <img class="kant" id="kgray" src="http://autogoods.su/lend/images/colors/kgray.png" alt="" >
          <img class="kant" id="kdgray" src="http://autogoods.su/lend/images/colors/kdgray.png" alt="" >
          <img class="kant" id="kblue" src="http://autogoods.su/lend/images/colors/kblue.png" alt="" >
          <img class="kant" id="kdblue" src="http://autogoods.su/lend/images/colors/kdblue.png" alt="" >
          <img class="kant" id="kbeige" src="http://autogoods.su/lend/images/colors/kbeige.png" alt="" >
          <img class="kant" id="kbrown" src="http://autogoods.su/lend/images/colors/kbrown.png" alt="" >
          <img class="kant selected" id="kred" src="http://autogoods.su/lend/images/colors/kred.png" alt="" >
          <img class="kant" id="korange" src="http://autogoods.su/lend/images/colors/korange.png" alt="" >
          <img class="kant" id="kgreen" src="http://autogoods.su/lend/images/colors/kgreen.png" alt="" >
          <img class="kant" id="kwhite" src="http://autogoods.su/lend/images/colors/kwhite.png" alt="" >
          <img class="kant" id="kpurple" src="http://autogoods.su/lend/images/colors/kpurple.png" alt="" >
</div>

VanilJS

Asked: 2020-10-12 03:44:55 +0000 UTC

如何在 ajax 电子邮件发送中添加选择和文本区域捕获？

0

有一个用于提交反馈表单的 Ajax 脚本。

$(function() {
        $('#writeAppointment').on('submit', function(e){
            e.preventDefault();
            var form = $(this);
            var data = new FormData();
            form.find(':input[name]').not('[type="file"]').each(function() {
                var field = $(this);
                data.append(field.attr('name'), field.val());
            });
            var filesField = form.find('input[type="file"]');
            var fileName = filesField.attr('name');
            var file = filesField.prop('files')[0];
            data.append(fileName, file) ;

            var url = 'multisend.php';

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                contentType: false,
                cache: false,
                processData:false,
                success: function(response) {
                    console.log(response)
                }
            });
        })
    });

但它只读取输入。如何向其中添加更多选择和文本区域？

VanilJS

Asked: 2020-10-11 02:27:46 +0000 UTC

如何对典型的 Ajax 邮件发送从 Google 进行 reCapcha 检查？

0

有一个发送数据的标准格式。
如何 Ajax 检查 Google reCapcha 中复选标记的点击？这样你就可以指定错误的脚本和提交成功的脚本 。除了插件的辅助包。

检查数据发送的典型脚本：

$(document).ready(function() {
        $("#writeAppointment").submit(function() {
            $.ajax({
                type: "POST",
                url: "mail.php",
                data: $(this).serialize()
            }).done(function() {
                alert("Успешная отправка");
            });
            return false;
        });
    });

VanilJS

Asked: 2020-08-30 00:02:42 +0000 UTC

有一个脚本，在 GET 请求中，它会转到所需的文件夹并显示该文件夹的内容列表。
例如，此链接index.php?url=files列出了页面上“ files ” 文件夹的内容。
如何将内容列表转换为链接，单击时会将它们添加到同一个 GET 变量中？
例如，我键入index.php?url=files并且该文件夹有一个 test 子文件夹并显示在列表中。我按下它，url变成了index.php?url=files/test并且测试文件夹的内容显示在页面上
。这是一个读取文件夹中内容的脚本：

<?php
$uri = $_GET['url'];
echo "<b>Список файлов:</b> " .'<br>';
$path = scandir("$uri");
    foreach($path as $k){
            echo $k."<br>";
}
?>

VanilJS

Asked: 2020-06-26 00:10:17 +0000 UTC

Webstorm 中的图像预览？

0

如何在 Webstorm IDE 中进行这样的图像预览？将鼠标悬停在 url 上时会显示缩略图

VanilJS

Asked: 2020-05-26 01:30:41 +0000 UTC

从txt文件中读取列表并将它们翻译成html页面？

1

我为这个陈腐的问题道歉..但我还是想不通。

有一个包含产品列表的txt文件，例如，内容如下：

url-картинки | Название | Описание
url-картинки | Название | Описание
url-картинки | Название | Описание
...динамическое количество строк...

问题：

- 读取 txt 文件并将数据输出到 html 页面的脚本是什么样子的，其中每一行都显示为一个单独的新 div？

一种产品的示例框图：

<div>
    <img src="URL">
    <p id="Name"></p>
    <p id="Desсription"></p>
</div>

ps 不考虑转换为另一种格式（csv 或 json）。还有插件，因为我会有更多的问题和问题（

谢谢大家的参与。你让世界变得更美好。

为什么 mobx 不更新动态输入的值？

如何选择最多 3 张卡，使其余卡处于非活动状态，将所有内容写入本地存储并显示加载时的所有内容？

如何在没有第一个参数post的情况下解析php中的json对象？

如何防止删除输入中的某个部分？

如何修复浮动中的浮动？

如果页面上没有元素，如何忽略 addEventListener 错误？

window.resize 时如何从菜单中删除闪烁或如何适应动态菜单？

为什么数据库中的最后一个元素输出 NULL（RedBeanPHP 使用）？

如何平滑替换 val() 而不是整个元素？

为什么图像替换不取决于所选的选择？

如何在 ajax 电子邮件发送中添加选择和文本区域捕获？

如何对典型的 Ajax 邮件发送从 Google 进行 reCapcha 检查？

如何将数组元素转换为将自身添加到 GET 请求的链接？

Webstorm 中的图像预览？

从txt文件中读取列表并将它们翻译成html页面？

我看不懂措辞

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

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

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

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

Python解析野莓

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

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

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

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

VanilJS's questions