Ответы пользователя по тегу JavaScript
  • Как написать .siblings() на javacript с использованием this?

    fallus
    @fallus
    Вероятно в Вашем коде стоит заменить document.querySelector('.show') на item
    Ответ написан
    1 комментарий
  • Как выбрать определенные элементы вверх по дереву?

    fallus
    @fallus
    Ну, если вверх по дереву, относительно кликнутой ссылки, не выходя за рамки .nav, то так:

    $('.link').on('click', function(e){
    	e.preventDefault();
    	$(this).parentsUntil('.nav', 'li').find('a').css('color', 'red')
    })
    Ответ написан
    Комментировать
  • Как получить текущие имя при нажатии на кнопку?

    fallus
    @fallus
    $('.sss').on('click', function(e) {
      e.preventDefault();
      var currentName = $(this).find('.product__item-name').text() // Если .product__item-name находится внутри кликнутого .sss
      console.log(currentName);
    });
    Ответ написан
  • Скрыть/показать контент для нескольких блоков?

    fallus
    @fallus
    Я ничего не понял.
    Но если нужно чтобы после клика по блоку, показывался блок, который внутри него(.col-xs-6.col-sm-12.dop-info), то вот.

    И если уж вы использовали jQuery, то я переписал всё на jQuery.

    $('.dop-info').hide()
    
    $('.btn-collapse.transition.collapsed').on('click', function (){
      $(this).find(".col-xs-6.col-sm-12.dop-info").show() // или toggle(), вместо show(), чтоб показать\скрыть
    });
    Ответ написан
    Комментировать
  • Текущий уровень громкости как в вк?

    fallus
    @fallus
    Если это 1 аудиоплеер, то:



    spoiler
    Если плееров много будет, то вместо querySelector юзать нужно querySelectorAll.
    Потом циклом по ним проходиться, подписывая события на каждый.
    И в этом случае, стоит обозначать, какой контейнер(с атрибутом data-hint) соответствует какому аудио-плееру.
    Проще всего, как в этом примере. Чтобы этот контейнер был родителем аудио-плееру.
    Чтобы в цикле, например, этот аудио-плеер можно было легко найти, например так:
    var myAudio = myAudioHoverBlock[i].querySelector('audio')
    Ответ написан
    Комментировать
  • Как выбрать элементы со ссылкой установленного формата (regex)?

    fallus
    @fallus
    $('a[href^="#"]')

    Выборка всех <a>, href которых начинается с #

    Если ссылка именно что в формата site.com/url.html#id, то можно так:
    $('a[href*=".html#"]')
    Ответ написан
    1 комментарий
  • Как обработать параметры на кириллице если есть пробел?

    fallus
    @fallus
    decodeURIComponent(linkHref)
    Ответ написан
    Комментировать
  • Ошибки TypeError: null is not an object в таймере на айфоне из-за чего она может быть?

    fallus
    @fallus
    Если в endtime приходит что-то вроде "11.08.2020", то тут может быть проблема в том, что Сафари — хороший браузер.
    На сколько помню, формат даты в этом браузере не dd.mm.yyyy и не dd-mm-yyyy, а dd/mm/yyyy

    Я бы проверил так, чтобы локализировать проблему:
    try {
    	const deadlineInput3 = document.querySelector('[name="quiz_deadline"]')
    	let deadline3 = deadlineInput3.getAttribute('value')
    
    	// Если это Сафари
    	if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
    		deadline3 = deadline3.replace(/-/g, '/').replace(/\./g, '/')
    	}
    
    	timer('#quizeTimer', deadline3)
    	console.log(deadline3)
    } catch (error) {
    	console.log('timer catch')
    	alert(error)
    }
    Ответ написан
  • Как убрать выход за границу при анимации (запретить любое перемещение по оси Х)?

    fallus
    @fallus
    Замените в HTML animItems на animationItems :)
    В консоли ж пишет, что, мол, «Не могу найти animItems!».

    JS-код должен быть перед </body>, в данном случае.
    Ответ написан
  • Как бы вы оценили верстку макета?

    fallus
    @fallus
    Это невероятно. Вот-вот должен позвонить президент.
    Ответ написан
  • Как копировать массив с элементами?

    fallus
    @fallus
    Там у вас куча опечаток.
    Поправил.

    <div class="container">
           <ul id="list">
                <li class="element">
                </li>
                <li class="element">
                </li>
                <li class="element">
                </li>
                <li class="element"> <!-- тут класс с опечаткой был -->
                </li>
            </ul>
    </div>


    let el = document.querySelectorAll('.element'),
        container = document.querySelector('#list'); // был выбран класс .container, а клонируемый элемент <li> должен быть в <ul> 
    let elClone = el[0].cloneNode();
    container.appendChild(elClone); // была опечатка в слове appendChild


    А так, в консоль смотрите. Там пишет, какая ошибка и где.

    А если ВЕСЬ список клонировать, то:

    spoiler
    let list = document.querySelector('#list'),
        container = document.querySelector('.container');
    container.appendChild(list.cloneNode(true));
    Ответ написан
    Комментировать
  • Как получить значение GET из URL?

    fallus
    @fallus
    ? $.get("test") — это асинхронный get-запрос. В данном случае по url "test"

    if(window.location.search.indexOf('test=') != -1){
     // условие сработает, если есть "test=" в "www.site.com/?test=lalala"
    }

    file.js:
    var getParams;
    // Если get-параметров много
    if(window.location.search.indexOf('&') != -1){
      getParams = window.location.search.split('&').map(function(item){
        var currentValue = item.split('=');
        return {[currentValue[0]]: currentValue[1]}
      });
    // если один
    } else {
      var currentValue = window.location.search.replace(/\?/, '').split('=');
      getParams = {[currentValue[0]]: currentValue[1]};
    }
    
    console.log(getParams);
    Ответ написан
  • Чтобы при клике на картинку отобразился ранее скрытый(display:none) текст, как?

    fallus
    @fallus
    В общем, в этот вашем jsfiddle.net (и в ваших интернетах в принципе), в окне javascript, слева-вверху есть опции «JavaScript + No-Library (pure JS)».
    Там стоит Load Type - On load или On DOM ready.

    Это значит, что весь JS, который написан в этом окне, находится внутри функции.
    Что-то вроде этого:
    window.addEventListener('load', function(){
    // ваш код
    })


    И так как вы объявляете функцию showtext внутри другой функции, ваша функция является локальной — её не видно извне.

    Решения два(или шесть, не уверен):
    1. Вместо атрибута onclick(onchange не работает на div'ах), вы можете написать в JS-код это:
    document.getElementById('primer2').addEventListener('click', showtext)

    2. Вверху-справа, в опциях LOAD TYPE выбрать Nowrap - bottom of <body> (эти типо расположит весь JS в самом конце содержимого body, без обёртывания в анонимную функцию)
    Ответ написан
    Комментировать
  • По выбору в селекторе Выполнен, выбрать строки с датами?

    fallus
    @fallus
    <select class="form-control" id="status-scan">
      <option value="0">Укажите статус</option>
      <option value="1">Выполнено</option>
    </select>


    $('#status-scan').on('change', function(){
        var isDone = $(this).val() == 1;
        $('.coolTable tr[data-scan]').each(function(idx, elm){
            $(elm).toggle($(elm).attr('data-scan').length > 0 || !isDone);
        });
    })
    Ответ написан
    Комментировать
  • Как всем карточкам поставить разные имена?

    fallus
    @fallus
    У вас приходит инфа только для одного товара же:
    spoiler

    [
    {
        "id": 250,
        "name": "Small Batch: Rye IPA",
        "tagline": "Rye India Pale Ale.",
        "first_brewed": "2016",
        "description": "A 7.2% rye IPA loaded with grapefruit notes, pithy citrus, and huge resinous bitterness, with rye character. The Centennial and Columbus flavours are amplified by the spicy, dry rye.",
        "image_url": "https://images.punkapi.com/v2/keg.png",
        "abv": 7.2,
        "ibu": 100,
        "target_fg": 1010,
        "target_og": 1065,
        "ebc": 8,
        "srm": 16,
        "ph": 4.4,
        "attenuation_level": 84,
        "volume":
        {
            "value": 20,
            "unit": "litres"
        },
        "boil_volume":
        {
            "value": 25,
            "unit": "litres"
        },
        "method":
        {
            "mash_temp": [
            {
                "temp":
                {
                    "value": 60,
                    "unit": "celsius"
                },
                "duration": 30
            },
            {
                "temp":
                {
                    "value": 65,
                    "unit": "celsius"
                },
                "duration": 20
            },
            {
                "temp":
                {
                    "value": 72,
                    "unit": "celsius"
                },
                "duration": 15
            },
            {
                "temp":
                {
                    "value": 78,
                    "unit": "celsius"
                },
                "duration": 10
            }],
            "fermentation":
            {
                "temp":
                {
                    "value": 21,
                    "unit": "celsius"
                }
            },
            "twist": null
        },
        "ingredients":
        {
            "malt": [
            {
                "name": "Maris Otter",
                "amount":
                {
                    "value": 4,
                    "unit": "kilograms"
                }
            },
            {
                "name": "Rye",
                "amount":
                {
                    "value": 0.8,
                    "unit": "kilograms"
                }
            }],
            "hops": [
            {
                "name": "Centennial",
                "amount":
                {
                    "value": 40,
                    "unit": "grams"
                },
                "add": "60",
                "attribute": "Bitter"
            },
            {
                "name": "Centennial",
                "amount":
                {
                    "value": 15,
                    "unit": "grams"
                },
                "add": "15",
                "attribute": "Bitter"
            },
            {
                "name": "Columbus",
                "amount":
                {
                    "value": 15,
                    "unit": "grams"
                },
                "add": "15",
                "attribute": "Flavour"
            },
            {
                "name": "Centennial",
                "amount":
                {
                    "value": 50,
                    "unit": "grams"
                },
                "add": "Whirlpool",
                "attribute": "Aroma"
            },
            {
                "name": "Columbus",
                "amount":
                {
                    "value": 25,
                    "unit": "grams"
                },
                "add": "Whirlpool",
                "attribute": "Aroma"
            },
            {
                "name": "Columbus",
                "amount":
                {
                    "value": 10,
                    "unit": "grams"
                },
                "add": "Dry Hop",
                "attribute": "Aroma"
            },
            {
                "name": "Citra",
                "amount":
                {
                    "value": 10,
                    "unit": "grams"
                },
                "add": "Dry Hop",
                "attribute": "Aroma"
            }],
            "yeast": "Wyeast 1272 - American Ale II™"
        },
        "food_pairing": ["Salmon Fishcakes with Rocket Salad", "Baked Goat's Cheese", "Classic Victoria Sponge"],
        "brewers_tips": "Be prepared for a long sparge as the rye content is really high.",
        "contributed_by": "John Jenkman <johnjenkman>"
    }]



    И если товаров в JSON будет больше, чем один, то то что ниже будет работать(сейчас это выведет 1 единственный товар):

    <body>
        <script src="index.js"></script>
     </body>


    const xml = new XMLHttpRequest();
    xml.open('GET', 'https://api.punkapi.com/v2/beers/random', true);
    xml.send();
    xml.onload = () => {
      const json = JSON.parse(xml.responseText);
      let allItems = '';
      
      json.forEach(item => {
      	allItems += '<div class="card" style="width: 18rem;"> <img class="card-img-top beer-image" src="' + item.image_url + '" alt="Card image cap" /> <div class="card-body"> <h5 id="nameBeer" class="card-title beer-name">' + item.name + '</h5> <p class="card-text beer-description">' + item.description + '</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>';
      });
      
      document.body.innerHTML = allItems;
    };
    Ответ написан
    Комментировать
  • Почему некорректно работает слайдер swiper?

    fallus
    @fallus
    Поменяйте местами:
    <script type="text/javascript" src="/templates/shablon/scripts.js"></script>
    <link rel="stylesheet"  href="/templates/shablon/css/all.css" type="text/css" />
    Ответ написан
    Комментировать
  • Передача параметров в css из Json?

    fallus
    @fallus
    const all = {
      "global": [
        {
          "id": "1",
          "width": "50",
          "height": "150"
        },
        {
          "id": "2",
          "width": "150",
          "height": "350"
        },
        {
          "id": "3",
          "width": "750",
          "height": "850"
        }
      ]
    };
    
    for(item of all.global){
        let elm = document.querySelector('.layer' + item.id);
        elm.style.width = item.width + 'px';
        elm.style.height = item.height + 'px';
    }
    Ответ написан
    Комментировать
  • Не работает переменная?

    fallus
    @fallus
    $("body").css("width") — возвращает строку (1000px, например).
    b_w-1216 = NaN.

    Лучше юзаните $(window).width()
    Ответ написан
    Комментировать
  • Почему отправляется только данные одной формы (PHP+AJAX)?

    fallus
    @fallus
    Я бы заменил это:
    $.ajax({
      method: "POST",
      contentType: false, 
      processData: false,           
      data: new FormData($(".divAddObject:visible form")[0]), 
      url: "handlers/add_object.php",
      success: function (data){}
    });

    На это:
    var formData = $(this).closest('form').serialize();
    
    $.ajax({
      method: "POST",
      contentType: false, 
      processData: false,           
      data: formData, 
      url: "handlers/add_object.php",
      success: function (data){}
    });


    Типо кликаешь по кнопке. Потом ищется её родитель-форма. Именно форма этой кнопки.
    Потом сериализуется и все сразу идут гулять с друзьями своими лучшими шестьюдесятью.
    Ответ написан