主页 / user-421423

hellokitViki's questions

Martin Hope
hellokitViki
Asked: 2023-09-19 03:21:27 +0800 CST
  • 5

我正在做一个测验。我不知道如何设置进度条，以便在单击“后退”和“前进”按钮时进度条减少和增加。

$(document).ready(() => {

  let quiz_item = 0;
  $('.quiz-item').each(function(key) {
    quiz_item = key;
  });

  let ind = 1;
  $('.next').click(function() {
    if (!$('.quiz-item').last().hasClass('active')) {
      move(true);

      var i = ind++;

      if (i < 2) {
        $('.progress-bar').css('width', 100 / quiz_item + '%');
      } else {
        $('.progress-bar').css('width', (100 / quiz_item) + (100 / quiz_item) + '%');
      }
    }
  });

  $('.prev').click(function() {
    if (!$('.quiz-item').first().hasClass('active')) {
      move(false);
    }
  });

  function move(direction) {
    direction
      ?
      $('.active')
      .removeClass('active')
      .next()
      .addClass('active') :
      $('.active')
      .removeClass('active')
      .prev()
      .addClass('active');
  }
})
/* line 1, ../quiz/assets/scss/_main.scss */

html,
body {
  font-family: 'Montserrat';
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}


/* Section */


/* line 1, ../quiz/assets/scss/_general.scss */

* {
  margin: 0;
  padding: 0;
}


/* line 6, ../quiz/assets/scss/_general.scss */

body {
  font-family: 'Montserrat';
}


/* line 10, ../quiz/assets/scss/_general.scss */

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-width: 0 !important;
  outline-style: none !important;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important;
}


/* line 35, ../quiz/assets/scss/_general.scss */

select:focus,
input:focus,
textarea:focus {
  border-color: #272727 !important;
  box-shadow: none !important;
}


/* line 42, ../quiz/assets/scss/_general.scss */

input:not([type="checkbox"]),
textarea {
  background-color: transparent !important;
  padding: 15px !important;
}


/* line 47, ../quiz/assets/scss/_general.scss */

textarea {
  min-height: 150px;
}


/* line 51, ../quiz/assets/scss/_general.scss */

input {
  color: #fff;
}


/* line 55, ../quiz/assets/scss/_general.scss */

.link {
  color: #000;
  text-decoration: none;
}


/* line 59, ../quiz/assets/scss/_general.scss */

.link:hover {
  color: #000;
}


/* line 1, ../quiz/assets/scss/_color.scss */

* {
  --main-text: #000;
  --text-span: rgba(255, 135, 67, 1);
  --main-promo: #A3B6C1;
  --main-background: #F6F6F6;
  --text-green: #56C167;
  --text-white: #fff;
  --text-green-hover: #2DAF42;
  --btn-shadow-green: 0px 5px 48px -10px rgba(86, 193, 103, 0.6);
}


/* line 3, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item {
  display: none;
}


/* line 6, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item.active {
  display: block;
}


/* line 10, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-items .quiz-item .quiz-title {
  padding: 20px 0;
}


/* line 16, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn {
  width: 187px;
  font-size: 17px;
  background-color: var(--text-green);
  color: var(--text-white);
  -webkit-box-shadow: var(--btn-shadow-green);
  -moz-box-shadow: var(--btn-shadow-green);
  box-shadow: var(--btn-shadow-green);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}


/* line 25, ../quiz/assets/scss/_quiz.scss */

section#quiz .quiz-btn:hover {
  background-color: var(--text-green-hover);
  color: var(--text-white);
}

@media (max-width: 767px) {
  /* line 16, ../quiz/assets/scss/_quiz.scss */
  section#quiz .quiz-btn {
    font-size: 17px;
  }
}


/*# sourceMappingURL=style.css.map */
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<section id="quiz" class="quiz my-5">
  <div class="container">
    <div class="quiz-items">
      <div class="progress mb-5">
        <div class="progress-bar bg-success" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="quiz-item text-center active">
        <div class="quiz-title">
          <h1>Заявка на расчет стоимости!</h1>
        </div>
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 1" id="checkbox1">
          <label class="form-check-label" for="checkbox1">
                            Тест 1
                        </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
      <div class="quiz-item">
        <input type="text" class="form-control" placeholder="">
        <input type="text" class="form-control" placeholder="">
      </div>
      <div class="quiz-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="Тест 2" id="checkbox2">
          <label class="form-check-label" for="checkbox2">
                            Тест 2
                        </label>
        </div>
      </div>
    </div>
    <div class="quiz-nav mt-5">
      <div class="d-flex justify-content-between">
        <a href="#!" class="btn quiz-btn prev">Назад</a>
        <a href="#!" class="btn quiz-btn next">Вперед</a>
      </div>
    </div>
  </div>
</section>

jquery
Martin Hope
hellokitViki
Asked: 2022-09-29 14:56:45 +0800 CST
  • 0

有几个块。脚本如何指定4种颜色，默认情况下，进入页面时会随机改变程序的背景。但不能重复。如果超过 4 个块，则再次显示给定块的颜色。

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

<div class="item">
  <div class="program"></div>
</div>

javascript jquery
Martin Hope
hellokitViki
Asked: 2022-08-30 22:23:17 +0800 CST
  • 0

告诉我如何更新数据库中 category = 2 的所有记录的年龄列；我是这样乱来的：

//Так обновляет все записи без условия
$user = User::updateAll(['age' => '21']);

//Так обновляет только колонку age в одной записи у которой категория = 2 
$user = user::findOne(['category' => '2']);
$user->age = '21';
$user->save();

php yii
Martin Hope
hellokitViki
Asked: 2022-07-20 22:10:09 +0800 CST
  • 0

请告诉我如何检查。如果我选择了一个或多个 filter=one 复选框，而其他所有复选框均未选中，则显示一条消息。

$('button').on('click', function() {
 if ( $('input[filter=one]:checked') && $('input:not([filter=one]):not(:checked)')) {
 alert(1);
 }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input filter="one" type="checkbox" checked>
<input filter="one" type="checkbox" checked>
<input filter="one" type="checkbox" checked>
<input filter="one" type="checkbox" checked>

<br/>

<input filter="two" type="checkbox">
<input filter="two" type="checkbox" checked>
<input filter="two" type="checkbox">
<input filter="two" type="checkbox">

<br/>

<input filter="three" type="checkbox">
<input filter="three" type="checkbox">
<input filter="three" type="checkbox">
<input filter="three" type="checkbox">

<button>Проверить</button>

javascript jquery
Martin Hope
hellokitViki
Asked: 2022-07-12 20:23:11 +0800 CST
  • 0

是否有可能以某种方式组合这些代码以使它们不会发送垃圾邮件？我使用代码根据收到的每个汽车品牌的数据启用复选框。那些。从数据库中我显示一个汽车列表，形成一个数字数组，然后通过 js 我找到复选框。

var arr = $.parseJSON('<?= json_encode($bmw)?>');
arr.forEach(function(arr) {
  $('input[att=bmw][value=' + arr + ']').attr('disabled', false);
});

var arr = $.parseJSON('<?= json_encode($audi)?>');
arr.forEach(function(arr) {
  $('input[att=audi][value=' + arr + ']').attr('disabled', false);
});

var arr = $.parseJSON('<?= json_encode($lada)?>');
arr.forEach(function(arr) {
  $('input[att=lada][value=' + arr + ']').attr('disabled', false);
});

javascript php
Martin Hope
hellokitViki
Asked: 2022-07-10 16:16:20 +0800 CST
  • 0

我想不通的东西。我有一个滑块背景（蓝色的）没有到达开头或在滑块更改时爬出滑块。如果我将 <input type="range" min="300" 的 min 设置为 0，那么没有问题，但我可以有不同的范围，甚至从 0 到 100，甚至从 1200 到 4000 等等。并且没有办法设置范围的背景，使其严格在数字范围内（简而言之，工作）。要查看我在说什么，请全屏打开代码。

window.onload = function(){
    slideOne();
    slideTwo();
}

let sliderOne = document.getElementById("slider-1");
let sliderTwo = document.getElementById("slider-2");
let displayValOne = document.getElementById("range1");
let displayValTwo = document.getElementById("range2");
let minGap = 0;
let sliderTrack = document.querySelector(".slider-track");
let sliderMaxValue = document.getElementById("slider-1").max;

function slideOne(){
    if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
        sliderOne.value = parseInt(sliderTwo.value) - minGap;
    }
    displayValOne.textContent = sliderOne.value;
    fillColor();
}
function slideTwo(){
    if(parseInt(sliderTwo.value) - parseInt(sliderOne.value) <= minGap){
        sliderTwo.value = parseInt(sliderOne.value) + minGap;
    }
    displayValTwo.textContent = sliderTwo.value;
    fillColor();
}
function fillColor(){
    percent1 = (sliderOne.value / sliderMaxValue) * 100;
    percent2 = (sliderTwo.value / sliderMaxValue) * 100;
    sliderTrack.style.background = `linear-gradient(to right, #dadae5 ${percent1}% , #3264fe ${percent1}% , #3264fe ${percent2}%, #dadae5 ${percent2}%)`;
}
*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
}
body{
    height: 100vh;
    display: -ms-grid;
    display: grid;
    background-color: #000;
    place-items: center;
}
.wrapper{
    position: relative;
    width: 95vmin;
    background-color: #ffffff;
    padding: 50px 40px 20px 40px;
    border-radius: 10px;
}
.container{
    position: relative;
    width: 100%;
    height: 100px;
    margin-top: 30px;
}
input[type="range"]{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}
.slider-track{
    width: 100%;
    height: 5px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 5px;
}
input[type="range"]::-webkit-slider-runnable-track{
    -webkit-appearance: none;
    height: 5px;
}
input[type="range"]::-moz-range-track{
    -moz-appearance: none;
    height: 5px;
}
input[type="range"]::-ms-track{
    appearance: none;
    height: 5px;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    background-color: #3264fe;
    cursor: pointer;
    margin-top: -9px;
    pointer-events: auto;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb{
    -webkit-appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]::-ms-thumb{
    appearance: none;
    height: 1.7em;
    width: 1.7em;
    cursor: pointer;
    border-radius: 50%;
    background-color: #3264fe;
    pointer-events: auto;
}
input[type="range"]:active::-webkit-slider-thumb{
    background-color: #ffffff;
    border: 3px solid #3264fe;
}
.values{
    background-color: green;
    width: 32%;
    position: relative;
    margin: auto;
    padding: 10px 0;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: 25px;
    color: #ffffff;
}
.values:before{
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    border-top: 15px solid green;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    margin: auto;
    bottom: -14px;
    left: 0;
    right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Double Range Slider</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="values">
            <span id="range1">
                0
            </span>
            <span> &dash; </span>
            <span id="range2">
                100
            </span>
        </div>
        <div class="container">
            <div class="slider-track"></div>
            <input type="range" min="300" max="1500" value="300" id="slider-1" oninput="slideOne()">
            <input type="range" min="300" max="1500" value="1500" id="slider-2" oninput="slideTwo()">
        </div>
    </div>
    
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

javascript jquery
Martin Hope
hellokitViki
Asked: 2022-06-30 04:32:13 +0800 CST
  • 0

有一个项目和输入列表。每个项目都是输入的索引。代码现在按 0 1 2 3 4 5 6 7 的顺序添加项目。以及如何使输入具有 data-ckeck 属性的地方，然后索引被复制，最后它会是这样的：0 1 1 2 3 4 5 5 ?

for (let i = 0; i < $('input').length; i++) {

  $('ul').append('<li index="' + [i] + '">'+[i]+'</li>');
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input />
<input data-ckeck />
<input data-ckeck />
<input />
<input />
<input />
<input data-ckeck />
<input data-ckeck />
<ul>

</ul>

javascript jquery
Martin Hope
hellokitViki
Asked: 2022-06-19 00:37:29 +0800 CST
  • 0

我有一个带有 id 列的cars_krep表和一个带有 id_cars_krep 列的products表（它将挂载 ID 存储为 {"id_krep":[1,2,4]} ）。是否可以像示例中那样以某种方式连接这些列？

$data = $db->getAll('SELECT products.*, cars_krep.* 
FROM cars_krep 
LEFT JOIN products 
on cars_krep.id = products.id_cars_krep');
php
Martin Hope
hellokitViki
Asked: 2022-06-18 15:27:25 +0800 CST
  • 0

有一个跨度集，每个集在属性中都有自己的文本。我想隐藏输入中没有单词的每个跨度。例如，隐藏除掀背车之外的所有东西。是否可以通过不精确的搜索（就像在 php 中一样）以某种方式选择跨度 1），2）不区分大小写

$('button').on('click', function() {
  var name = $('input').val();
  if (name !== '') {
    $('span[data-name!=' + name + ']').hide();
  } else {
    $('span').show();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span data-name="Audi 100">Audi 100</span><br/>
<span data-name="Audi 100 седан">Audi 100 седан</span><br/>
<span data-name="BMW">BMW</span><br/>
<span data-name="Alfa Romeo 147 хэтчбек">Alfa Romeo 147 хэтчбек</span><br/>
<span data-name="Alfa Romeo хэтчбек">Alfa Romeo хэтчбек</span><br/>

<input value="хэтчбек" />
<button>Скрыть все, кроме слова хэтчбек</button>

javascript jquery
Martin Hope
hellokitViki
Asked: 2022-08-13 04:31:08 +0800 CST
  • 0

如何在选择选择时形成带有参数的链接：shop?brand=1&model=2&body=3&krep=4，以便将其添加到表单或其他地方。就像我现在做的那样，但是链接被覆盖了，没有更新。似乎需要某种变量来存储以前的值，但我不明白一切应该如何。

$('select[data-filter="carSelect"]').on('click', function(){
  $('#link').val('?id='+$(this).val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-filter="carSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select data-filter="carSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<select data-filter="carSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

<input id='link' value="">

javascript
Martin Hope
hellokitViki
Asked: 2022-07-26 18:41:39 +0800 CST
  • 1

我有两个输入（可能更多），每个输入都具有相同的名称以形成一个数组，在本例中为 name="cards[unique name]"。另外，还有一个json，我需要从里面按键获取数据，放到对应输入的值中。那些。我将 json 中的键与输入的名称进行比较，并将值放在那里。

var content = '{"cards":{"title":"1","text":"2"},"active":"1","ver":"v1","sort":"3"}';
var obj = jQuery.parseJSON(content);

var arr = [];
$('.form-component').each(function() {
  arr.push($(this).attr('name'));
});

arr.forEach(function(arr) {
  $('.form-component[name="' + arr + '"]').val(obj[arr]);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input class="form-component" name="cards[title]" value="">
<input class="form-component" name="cards[text]" value="">
<input class="form-component" name="active" value="">

根据代码，我执行以下操作：我收集具有相同类的所有输入并获取它们的名称。我从它们中形成一个数组。然后我遍历带有名称的数组并将其替换为 obj[arr]。

如果输入具有简单的名称，例如 name="active"。然后一切正常，但如果使用 name="cards[title]"，则不行。或者，如果您像这样手动指定它： obj.cards['title'] - 同样可以。

javascript
Martin Hope
hellokitViki
Asked: 2022-07-19 17:58:48 +0800 CST
  • 0

我有一个块列表，每个块都有自己的表单构建器（下面的脚本）。我遍历所有块并从中获取 data-builder 和 data-id 值。然后我想从它们创建一个 key=value 数组。然后在构造函数脚本中，将 data-builder 值插入 formData: arr['j'] 并将 data-id 插入 +arr['id']+ 。但它不出来。

var arr = [];
$('div[data-builder]').each(function() {
    arr.push('j' : $(this).attr('data-builder'), 'id' : $(this).attr('data-id'));
});

arr.forEach(function(arr) {
let options = {
  dataType: 'xml',
  onSave: function(evt, formData){showPreview(formData)},
  formData: arr['j'],
  disableFields: [
    'autocomplete',
    'file',
    'date',
    'hidden',
    'button',
    'checkbox-group',
    'radio-group',
    'number'
  ],
  disabledAttrs: ["access","required","toggle","inline"],
};
const $fbEditor = $('.build-wrap[data-id="'+arr['id']+'"]');

const formBuilder = $fbEditor.formBuilder(options);

});

javascript
Martin Hope
hellokitViki
Asked: 2022-07-19 16:18:19 +0800 CST
  • 0

如何在 include 中指定具有页面名称的变量？我有一个存储模板路径的数据库。我想要一个迷你块构造函数之类的东西。这样我就可以在页面上指定一个单独的块列表并通过包含显示它们。但是如果我这样做，那么错误是无法找到模板“page/blocks/{{el.block}}/template.html.twig”

{% for el in page %}
    {% include 'page/blocks/{{el.block}}/template.html.twig' %}
{% endfor %}

之后如何在包含块中传递变量{{ el.content }}？

symfony
Martin Hope
hellokitViki
Asked: 2022-05-23 19:01:20 +0800 CST
  • 0

表格中有一个数组 $data['products']

Array
(
    [0] => Array
    (
        [ID] => 12
        [name] => def
    )

    [1] => Array
    (
        [ID] => 12
        [name] => jkl
    )

    [2] => Array
    (
        [ID] => 100
        [name] => sds
    )
)

如何从中删除所有元素，除了第一个元素，ID 键的值相同（在这种情况下，ID = 12 的任何地方）？

php
Martin Hope
hellokitViki
Asked: 2022-04-27 05:00:43 +0800 CST
  • 0

告诉我，我正在查询数据库以获取向其发送消息的用户的 id，但我从数据库中得到的不是两个 id，而是一个。

  $users_open_chat = DB::table('message')
      ->where('id_user_from','=',Auth::user()->id) //тут указываю "получить список сообщений с id равное id авторизованного пользователя"
      ->groupBy('id_user_to') // группирую все одинаковые id пользователей к которым были отправлены сообщения 
      ->get();
      
    
      
      foreach ($users_open_chat as $key => $row) {
        $users_all = $row->id_user_to; //тут должно вывестись числа 3 и 4 (т.е. те люди к которым были отправлены сообщения)
        
        $ids = explode(',', $users_all);
                
        $users = DB::table('users')
        ->whereIn('id', [$ids]) //вывожу список пользователей
        ->get();
      }

php
Martin Hope
hellokitViki
Asked: 2022-08-09 19:42:00 +0800 CST
  • 0

如何从多个输入中传递文本以及占位符？To be: Color: ...., Style: ...., 现在只有第一个输入的占位符总是被传递

var fields = $('#quiz-forms').find('.quiz-form');
  fields.on('change keyup', function(){
    var tags = [];
    fields.each(function(){
      if ($(this).val().length)
      {
        tags.push($(this).val());
      }
    });
    $('#SendInput', '#quiz-forms').val($('.quiz-form').attr('placeholder')+tags.join(', '));
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="quiz-forms">
<input type="text"  class="form-control quiz-form"  placeholder="Цвет: "/><br/>
<input type="text"  class="form-control quiz-form"  placeholder="Фасон: "/><br/>

<input type="" name="SendInput" id="SendInput" value="" />
</form>

javascript