Drukowana wersja tematu

Napisany przez: topcio 15.10.2018, 04:11:07

Witajcie, czy mogę prosić by poniższy skrypt napisać w czystym JS, jakoś sam nie potrafię tego zrobić.

[HTML] pobierz, plaintext 
$(document).off('click.choose_item');
$(document).on('click.choose_item', '.choose_item', function () {
    $('.choose_item').not($(this)).removeClass('open');
    $(this).toggleClass('open');
});
$(document).on('click.choose_item', function (event) {
    if ($(event.target).closest('.choose_item').length === 0) {
        $('.choose_item').removeClass('open');
    }
});
[HTML] pobierz, plaintext 

Napisany przez: markuz 15.10.2018, 10:34:53

Poczytaj o:
https://developer.mozilla.org/pl/docs/Web/API/Document/querySelector
https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener
https://developer.mozilla.org/pl/docs/Web/API/Element/classList

Napisany przez: viking 15.10.2018, 10:41:39

Problemem tutaj będzie namespace. Musiałbyś stworzyć klasę lub obiekt do przechowywania zdarzeń.

Napisany przez: topcio 15.10.2018, 14:23:17

no właśnie tak zrobiłem Viking

[HTML] pobierz, plaintext 
const test = [...document.querySelectorAll('.choose_item')];
 
const tablica = {
    defaultImage: "<http://december.com/html/4/element/img.html class=\"item_grades\" src='images\\Frames\\[Common]_Item_Frame.png'>",
    defaultBackgroundImage: "url('/images/Speed_Up/Choose_Item.png')",
    HTML: "",
}
 
function selectDiv() {
    if (tablica.HTML == this.dataset.option) {
        this.classList.remove('open');
        tablica.HTML = "";
        this.innerHTML = tablica.defaultImage;
        this.style.backgroundImage = tablica.defaultBackgroundImage;
        document.querySelector('.items_div').style.display = "none";
    } else {
        tablica.HTML = this.dataset.option;
        test.forEach(element => element.classList.remove('open'))
        test.forEach(element => element.innerHTML = tablica.defaultImage)
        test.forEach(element => element.style.backgroundImage = tablica.defaultBackgroundImage)
        this.classList.add('open');
        this.innerHTML = "";
        this.style.backgroundImage = 'none';
        document.querySelector('.items_div').style.display = "flex";
    }
 
}
 
test.forEach(element => element.addEventListener('click', selectDiv))
 
[HTML] pobierz, plaintext