主页 / user-541125

powerg's questions

Martin Hope
powerg
Asked: 2024-11-07 07:12:07 +0000 UTC
  • 5

页面上有 2 个过滤器，请告诉我如何制作，以便过滤仅应用于您的块？

let blogItems = document.querySelectorAll('.filter-column');
if (blogItems.length > 0) {
    let blogFilters = document.querySelectorAll('.filter__title');
    if (blogFilters.length > 0) {
        for (let index = 0; index < blogFilters.length; index++) {
            const blogFilter = blogFilters[index];
            blogFilter.addEventListener("click", function (e) {
                e.preventDefault();
                const blogFilterValue = blogFilter.dataset.filter;
                const blogFilterActive = document.querySelector('.filter__title._active');
                blogFilter.classList.add('_active');

                showBlogItems(blogFilterValue);
            });
        }
        function showBlogItems(filter) {
            for (let index = 0; index < blogItems.length; index++) {
                const blogItem = blogItems[index];
                if (filter === 'all' || !filter) {
                    blogItem.classList.remove('_hide');
                    blogItem.classList.remove('_active');
                } else {
                    blogItem.classList.add('_hide');
                    blogItem.classList.remove('_active');
                    if (blogItem.classList.contains('filter__column_' + filter)) {
                        blogItem.classList.remove('_hide');
                        blogItem.classList.add('_active');
                    }
                }
            }
        }
    }
}
.filter-column._hide{
  display:none;
}
<div>
<nav class="filter__navigation">
  <button data-filter="all" type="button" class="filter__title _active">
    <span class="button"> Все результаты </span>
  </button>
  <button data-filter="article-1" type="button" class="filter__title">
    <span class="button">Статьи 1</span>
  </button>
  <button data-filter="article-2" type="button" class="filter__title">
    <span class="button">Статьи 2</span>
  </button>
  <button data-filter="article-3" type="button" class="filter__title">
    <span class="button">Статьи 3</span>
  </button>
</nav>
<div class="search__body">
        <div class="search__column filter-column filter__column_article-1">
                            lorem1
        </div>
        <div class="search__column filter-column filter__column_article-2">
                            lorem2
        </div>
        <div class="search__column filter-column filter__column_article-3">
                            lorem3
        </div>
</div>
</div>

<div>
<nav class="filter__navigation">
  <button data-filter="all" type="button" class="filter__title _active">
    <span class="button"> Все результаты </span>
  </button>
  <button data-filter="services-1" type="button" class="filter__title">
    <span class="button">Услуга 1</span>
  </button>
  <button data-filter="services-2" type="button" class="filter__title">
    <span class="button">Услуга 2</span>
  </button>
  <button data-filter="services-3" type="button" class="filter__title">
    <span class="button">Услуга 3</span>
  </button>
</nav>
<div class="search__body">
        <div class="search__column filter-column filter__column_services-1">
                            lorem1
        </div>
        <div class="search__column filter-column filter__column_services-2">
                            lorem2
        </div>
        <div class="search__column filter-column filter__column_services-3">
                            lorem3
        </div>
</div>
</div>

javascript
Martin Hope
powerg
Asked: 2023-08-05 19:08:57 +0000 UTC
  • 5

您能告诉我如何确定点击时的元素吗？如果您点击周五/周六/周日的任何一天，该课程将仅在第二次点击时添加到页面中。谢谢

const calendar = document.querySelector(".calendar__main");
if (calendar) {
    const input = document.querySelector("#date");
    const calHeader = document.querySelector(".calendar__header");
    const calHeaderTitle = document.querySelector(".calendar__header span");
    const calDays = document.querySelector(".calendar__days");
    const days = [
        "Пн",
        "Вт",
        "Ср",
        "Чт",
        "Пт",
        "Сб",
        "Вс"
    ];
    const months = [
        "Январь",
        "Февраль",
        "Март",
        "Апрель",
        "Май",
        "Июнь",
        "Июль",
        "Август",
        "Сентябрь",
        "Октябрь",
        "Ноябрь",
        "Декабрь"
    ];

    let oneDay = 60 * 60 * 24 * 1000;
    let todayTimestamp =
        Date.now() -
        (Date.now() % oneDay) +
        new Date().getTimezoneOffset() * 1000 * 60;

    let selectedDay = todayTimestamp;
    // console.log(selectedDay); // Str in millisec

    // Get num of days in month
    // month param 0-11
    const getNumberOfDays = (year, month) => {
        return 40 - new Date(year, month, 40).getDate();
    };
    // getNumberOfDays(2023, 1);

    // Calc day details
    const getDayDetails = (args) => {
        let date = args.index - args.firstDay;
        let day = args.index % 7;
        // console.log(day)
        let prevMonth = args.month - 1;
        let prevYear = args.year;
        if (prevMonth < 0) {
            prevMonth = 11;
            prevYear--;
        }
        let prevMonthNumberOfDays = getNumberOfDays(prevYear, prevMonth);

        let _date =
            (date < 0 ? prevMonthNumberOfDays + date : date % args.numberOfDays) + 1;
        // console.log(_date)
        let month = date < 0 ? -1 : date >= args.numberOfDays ? 1 : 0;
        let timestamp = new Date(args.year, args.month, _date).getTime();
        // console.log(timestamp)
        return {
            date: _date,
            day,
            month,
            timestamp,
            dayString: days[day]
        };
    };

    // [{}] each {} with details for each day of month
    const getMonthDetails = (year, month) => {
        let firstDay = new Date(year, month).getDay();
        let numberOfDays = getNumberOfDays(year, month);
        let monthArray = [];
        let rows = 5;
        let currentDay = null;
        let index = 0;
        let cols = 7;

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                currentDay = getDayDetails({
                    index,
                    numberOfDays,
                    firstDay,
                    year,
                    month
                });
                monthArray.push(currentDay);
                index++;
            }
        }
        return monthArray;
    };
    // getMonthDetails(2023, 3)

    // Variables that get updated with "state" changes
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth();
    let monthDetails = getMonthDetails(year, month);

    const isCurrentDay = (day, cell) => {
        if (day.timestamp === todayTimestamp) {

            cell.classList.add("active");
            cell.classList.add("isCurrent");

        }
    };

    // Checks if day is one selected
    const isSelectedDay = (day, cell) => {
        if (day.timestamp === selectedDay) {
            cell.classList.add("active");
            cell.classList.add("isSelected");
        }
    };

    // Get month str
    const getMonthStr = (month) =>
        months[Math.max(Math.min(11, month), 0)] || "Month";
    // console.log(getMonthStr(month))

    // Set year using arrows
    const setHeaderNav = (offset) => {
        month = month + offset;
        if (month === -1) {
            month = 11;
            year--;
        } else if (month === 12) {
            month = 0;
            year++;
        }
        monthDetails = getMonthDetails(year, month);
        // console.log(getMonthDetails(year, month))
        return {
            year,
            month,
            monthDetails
        };
    };

    // Set dynamic calendar header
    const setHeader = (year, month) => {
        calHeaderTitle.innerHTML = getMonthStr(month) + " " + year;
    };

    // Set calendar header
    setHeader(year, month);

    // 1677139200000 => "2023-02-23"
    const getDateStringFromTimestamp = (timestamp) => {
        let dateObject = new Date(timestamp);
        let month = dateObject.getMonth();
        let date = dateObject.getDate();
        // return (
        //   dateObject.getFullYear() +
        //   "-" +
        //   (month < 10 ? "0" + month : month) +
        //   "-" +
        //   (date < 10 ? "0" + date : date)
        // );
        return `${getMonthStr(month)} ${date}, ${dateObject.getFullYear()}`;
    };

    const setDateToInput = (timestamp) => {
        let dateString = getDateStringFromTimestamp(timestamp);
        input.value = dateString;
    };
    setDateToInput(todayTimestamp);

    // Add days row to calendar
    for (let i = 0; i < days.length; i++) {
        let div = document.createElement("div"),
            span = document.createElement("span");

        div.classList.add("cell_wrapper");
        // div.classList.add("cal_days");
        span.classList.add("cell_item");

        span.innerText = days[i].slice(0, 2);

        div.appendChild(span);
        calDays.appendChild(div);
    }

    // Add dates to calendar
    const setCalBody = (monthDetails) => {
        // Add dates to calendar
        for (let i = 0; i < monthDetails.length; i++) {
            let div = document.createElement("div"),
                span = document.createElement("span");

            div.classList.add("cell_wrapper");
            div.classList.add("cal_date");
            monthDetails[i].month === 0 && div.classList.add("current");
            monthDetails[i].month === 0 && isCurrentDay(monthDetails[i], div);
            span.classList.add("cell_item");
            var fifth_1 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(5)")
            fifth_1.forEach(five => {
                five.classList.add("fifth-day");
            });
            var fifth_2 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(12)")
            fifth_2.forEach(five => {
                five.classList.add("fifth-day");
            });
            var fifth_3 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(19)")
            fifth_3.forEach(five => {
                five.classList.add("fifth-day");
            });
            var fifth_4 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(26)")
            fifth_4.forEach(five => {
                five.classList.add("fifth-day");
            });
            var fifth_5 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(33)")
            fifth_5.forEach(five => {
                five.classList.add("fifth-day");
            });

            var sixth_1 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(6)")
            sixth_1.forEach(six => {
                six.classList.add("sixth-day");
            });
            var sixth_2 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(13)")
            sixth_2.forEach(six => {
                six.classList.add("sixth-day");
            });
            var sixth_3 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(20)")
            sixth_3.forEach(six => {
                six.classList.add("sixth-day");
            });
            var sixth_4 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(27)")
            sixth_4.forEach(six => {
                six.classList.add("sixth-day");
            });
            var sixth_5 = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(34)")
            sixth_5.forEach(six => {
                six.classList.add("sixth-day");
            });

            var seventh = document.querySelectorAll(".calendar__main .cell_wrapper.cal_date:nth-child(7n)")
            seventh.forEach(seven => {
                seven.classList.add("seventh-day");
            });

            span.innerText = monthDetails[i].date;

            div.appendChild(span);
            calendar.appendChild(div);
        }
    };

    setCalBody(monthDetails);

    const updateCalendar = (btn) => {
        let newCal, offset;
        if (btn.classList.contains("calendar__btn-prev")) {
            // let { year, month, monthDetails } = setHeaderNav(-1);
            offset = -1;
        } else if (btn.classList.contains("calendar__btn-next")) {
            // let { year, month, monthDetails } = setHeaderNav(1);
            offset = 1;
        }
        newCal = setHeaderNav(offset);
        // console.log(monthDetails)
        setHeader(newCal.year, newCal.month);
        calendar.innerHTML = "";
        setCalBody(newCal.monthDetails);
    };

    // Only one calendar date is selected
    const selectOnClick = () => {
        document.querySelectorAll(".cell_wrapper").forEach((cell) => {
            cell.classList.contains("isSelected") && cell.classList.remove("active");
            if (cell) {
                cell.addEventListener("click", function (e) {
                    const calendarItemFifth = document.querySelector('.cell_wrapper.cal_date.current.fifth-day.active');
                    console.log(calendarItemFifth)
                    if (calendarItemFifth) {
                        document.documentElement.classList.add("_active-wek-fifth")
                    } else {
                        document.documentElement.classList.remove("_active-wek-fifth")
                    }
                    const calendarItemsSixth = document.querySelector('.cell_wrapper.cal_date.current.sixth-day.active.isSelected');
                    console.log(calendarItemsSixth)
                    if (calendarItemsSixth) {
                        document.documentElement.classList.add("_active-wek-sixth")
                    } else {
                        document.documentElement.classList.remove("_active-wek-sixth")
                    }
                    const calendarItemSeventh = document.querySelector('.cell_wrapper.cal_date.current.seventh-day.active.isSelected');
                    console.log(calendarItemSeventh)
                    if (calendarItemSeventh) {
                        document.documentElement.classList.add("_active-wek-seventh")
                    } else {
                        document.documentElement.classList.remove("_active-wek-seventh")
                    }
                });

            }
            if (cell.classList.contains("isCurrent") &&
                !cell.classList.contains("active")) {
                cell.querySelector("span").classList.add("inactive_indicator");
            }
        });
    };


    const updateInput = () => {
        let currentDay = document.querySelector(".isCurrent");

        // Update input based on clicked cell
        document.querySelectorAll(".cell_wrapper").forEach((cell) => {
            if (cell.classList.contains("current")) {
                cell.addEventListener("click", (e) => {
                    let cell_date = e.target.textContent;

                    currentDay !== null && currentDay.classList.remove("active");

                    for (let i = 0; i < monthDetails.length; i++) {
                        if (monthDetails[i].month === 0) {
                            if (monthDetails[i].date.toString() === cell_date) {
                                selectedDay = monthDetails[i].timestamp;
                                setDateToInput(selectedDay);
                                selectOnClick();

                                isSelectedDay(monthDetails[i], cell);

                                cell.querySelector('span').classList.contains('inactive_indicator')
                                    && cell.querySelector('span').classList.remove('inactive_indicator');
                            }
                        }
                    }
                });
            }
        });
    };

    updateInput();

    // Set header nav actions
    document.querySelectorAll(".calendar-btn").forEach((btn) => {
        btn.addEventListener("click", () => {
            updateCalendar(btn);
            updateInput();
        });
    });

    input.addEventListener('click', () => {
        document.querySelector('.calendar__content').classList.toggle('hidden');
        document.querySelector('.calendar__input').classList.toggle('showCal');
        document.querySelector('#date').classList.toggle('onFocus');
    });
    window.addEventListener('click', e => {
        const target = e.target
        if (!target.closest('#date') && !target.closest('.calendar__input') && !target.closest('.calendar__content')) {
            document.querySelector('.calendar__content').classList.add('hidden');
            document.querySelector('.calendar__input').classList.remove('showCal');
            document.querySelector('#date').classList.add('onFocus');
        }
    })

}
.calendar{
  position: relative;
}
.calendar__input {
  position: relative;
  cursor: pointer;
  width: 100%;
}
.calendar__input input {
  cursor: pointer;
   width: 100%;
}
.calendar__input input._form-focus {
  border: 1px solid #ebebeb;
}
.calendar__input.showCal input {
  border: 1px solid green;
}
.calendar__input.showCal::before {
  color: green;
}
.calendar__input::before {
  position: absolute;
  right: 20px;
  font-size: 20px;
  color: #afafaf;
  top: 50%;
  transform: translate(0, -50%);
  pointer-events: none;
}
.calendar__content {
  position: absolute;
  z-index: 40;
  right: 0;
  padding: 25px;
  top: 99%;
  width: auto;
  background: #f8f8f8;
  border: 1px solid green;
  border-radius: 2px;
}
.calendar__header {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 16px;
  margin: 0px 0px 24px 0px;
}
.calendar__header span {
  flex: 1 1 auto;
}
.calendar__btn-prev {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 27px 0px 0px;
}
.calendar__btn-prev::before {
  font-size: 16px;
  transform: rotate(-90deg);
}
.calendar__btn-prev:hover::before {
  color: green;
}
.calendar__btn-next {
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calendar__btn-next::before {
  font-size: 16px;
  transform: rotate(90deg);
}
.calendar__btn-next:hover::before {
  color: green;
}
.calendar__days {
  display: grid;
  column-gap: 35px;
  grid-template-columns: repeat(7, 1fr);
  margin: 0px 0px 16px 0px;
}
.calendar__main {
  display: grid;
  column-gap: 35px;
  row-gap: 16px;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, min(32px));
}

.cal_date .cell_item {
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
}

.cell_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cell_wrapper .cell_item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  position: relative;
  font-weight: 400;
  font-size: 16px;
  border-radius: 50%;
  color: rgba(49, 49, 49, 0.5);
}
.cell_wrapper.active .cell_item {
  background: #efa021;
  color: #ffffff;
}

.current .cell_item {
  color: #111111;
}

.hidden {
  visibility: hidden;
}
<div class="tabs-transmit-readings__calendar calendar">
  <div class="calendar__input  _icon-calendar">
    <input autocomplete="off" type="text" id="date" class="onFocus" readonly>
  </div>
  <div class="calendar__content hidden">
    <div class="calendar__header">
      <span></span>
      <button class="calendar__btn-prev calendar-btn _icon-arrow-slider"></button>
      <button class="calendar__btn-next calendar-btn _icon-arrow-slider"></button>
    </div>
    <div class="calendar__wrapper">
      <div class="calendar__days"></div>
      <div class="calendar__main"></div>
    </div>
  </div>
</div>

javascript
Martin Hope
powerg
Asked: 2023-07-04 06:46:18 +0000 UTC
  • 5

当您将鼠标悬停在卡片上时，图片会发生变化，问题是当您将鼠标悬停在第一个产品卡上时，第二个产品卡也开始消失。告诉我如何分别为每张卡应用悬停？谢谢

const galleryItems = document.querySelectorAll('.product-card__item');

if (galleryItems) {
    galleryItems.forEach(item => {
        item.addEventListener("mouseenter", function (e) {
            galleryItems.forEach(el => { el.classList.remove('_active'); });
            item.classList.add('_active')
        });
        item.addEventListener("mouseleave", function (e) {
            galleryItems.forEach(el => { el.classList.remove('_active'); });
            galleryItems[0].classList.add('_active')
        });
    });
}
.product__body{
  display: flex;
}

.products__column{
  flex: 0 1 auto;
  margin: 0px 20px 0px 0px;
}

.product-card__images {
  display: flex;
  position: relative;
  height: 363px;
  width: 300px;
}

a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: block;
  left: 0;
}

img {
  transition: opacity 0.2s ease-in-out;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  opacity: 0;
}

.product-card__item._active img{
  opacity: 1;
}

.product-card__items{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        z-index: 2;
    }

.product-card__item{
        flex-grow: 1;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        background-color: #fff;
        background: 0 0;
        margin: 0px 2px;
    }
<div class="product__body">
  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item _active">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
          <span class="product-card__item">
            <span class="product-card__item-nav"></span>
            <img src="https://kisa.club/uploads/posts/2023-04/1680336969_kisa-club-p-stil-odezhdi-devochki-krasivo-1.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>

  <div class="products__column product-card">
    <div class="product-card__images">
      <a href="#">
        <span class="product-card__items">
          <span class="product-card__item _active">
            <img src="https://kisa.club/uploads/posts/2023-03/1679858194_kisa-club-p-stilnie-komplekti-odezhdi-instagram-4.jpg" alt>
          </span>
        </span>
      </a>
    </div>
  </div>
</div>

javascript
Martin Hope
powerg
Asked: 2023-05-06 09:03:51 +0000 UTC
  • 6

当点击“上传文件”按钮时，每个按钮加载自己的文件。现在，无论按下哪个按钮，所有内容都会应用于第一个按钮。谢谢

const inputFiles = document.querySelectorAll('.input-file');
if (inputFiles) {
    const inputFileClose = document.querySelector('.input-file-close');
    const inputFileName = document.querySelector('.input-file-name');
    let pattern = /((?:.(?!\(\d+\)))+.)(?:\(\d+\))?\..+/
    inputFiles.forEach(inputFile => {
        inputFile.addEventListener("change", function (e) {
            inputFileName.textContent = this.files[0].name.match(pattern)[1]
            inputFileName.classList.add("_active")
            inputFileClose.classList.add("_active")
        });
        inputFileClose.addEventListener("click", function (e) {
            inputFileName.classList.remove("_active")
            inputFileClose.classList.remove("_active")
        });
    });
}
.left-form-calculator__files {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 0 0 0;
    margin: -10px -5px
}

.left-form-calculator__file-inputs {
    position: relative;
    min-width: 175px;
    height: 53px;
    padding: 10px 5px 10px 0;
    margin: 0 0 0 5px
}

.left-form-calculator__file-input-value {
    position: relative;
    padding: 10px 5px
}

.left-form-calculator__input-file-name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    border: none;
    border-radius: 10px;
    background-color: #f8f8fa;
    font-size: 14px;
    line-height: 1.2857142857;
    color: #91919b;
    padding: 15px 20px;
    display: none
}

.left-form-calculator__input-file-name._active {
    display: block
}

.left-form-calculator__input-file-close{
   position: absolute;
    top: 2px;
    right: 2px;
    display: none;
    cursor: pointer
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f5912d;
    color: #fff;
    font-size: 12px;
    padding: 6px;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.left-form-calculator__input-file-close:hover::before {
    background: #af671e
}

.left-form-calculator__input-file-close._active {
    display: block
}

.left-form-calculator__file {
    display: none
}

.left-form-calculator__label-file {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding: 15px 20px;
    border: 1px solid #e1e1eb;
    border-radius: 10px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    -webkit-transition: all .3s ease 0s;
    -o-transition: all .3s ease 0s;
    transition: all .3s ease 0s
}

.left-form-calculator__label-file:hover {
    border: 1px solid #f5912d
}

.left-form-calculator__label-icon {
    width: 20px;
    height: 20px;
    margin: 0 10px 0 0
}

.left-form-calculator__label-text {
    white-space: nowrap;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2857142857;
    color: #91919b
}
<div class="left-form-calculator__files">
  <div class="left-form-calculator__file-inputs">
    <input class="left-form-calculator__file input-file" type="file" name="file" id="input-file">
    <label class="left-form-calculator__label-file" for="input-file">
      <div class="left-form-calculator__label-text">Загрузить файл</div>
    </label>
  </div>
  <div class="left-form-calculator__file-input-value">
    <div class="left-form-calculator__input-file-name input-file-name" type="text" id="filename"></div>
    <div class="left-form-calculator__input-file-close input-file-close _icon-close">x</div>
  </div>
</div>

<div class="left-form-calculator__files">
  <div class="left-form-calculator__file-inputs">
    <input class="left-form-calculator__file input-file" type="file" name="file" id="input-file">
    <label class="left-form-calculator__label-file" for="input-file">
      <div class="left-form-calculator__label-text">Загрузить файл</div>
    </label>
  </div>
  <div class="left-form-calculator__file-input-value">
    <div class="left-form-calculator__input-file-name input-file-name" type="text" id="filename"></div>
    <div class="left-form-calculator__input-file-close input-file-close _icon-close">x</div>
  </div>
</div>

javascript
Martin Hope
powerg
Asked: 2023-05-06 06:45:27 +0000 UTC
  • 6

你能告诉我是否可以像这样移动文本吗？

在此处输入图像描述

这样的转移甚至可能吗？我只能按块实施传输：

.breadcrambs__content ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  max-width: 347px;
}

.breadcrambs__content li {}

.breadcrambs__content li span {
  font-weight: 400;
  font-size: 12px;
  transition: all 0.3s ease 0s;
  word-break: break-all;
  text-decaration: none;
  color: #111111;
}

.breadcrambs__content li a {
  font-weight: 400;
  font-size: 12px;
  transition: all 0.3s ease 0s;
  word-break: break-all;
  text-decaration: none;
  color: #111111;
}

.breadcrambs__content a span {
  text-decaration: none;
  margin: 0px 10px 0px 10px;
}
<div class="breadcrambs">
  <div class="breadcrambs__container">
    <div class="breadcrambs__content">
      <ul>
        <li><a href="#">Главная<span>/</span></a></li>
        <li><a href="#">Каталог товаров<span>/</span></a></li>
        <li><a href="#">Спецодежда<span>/</span></a></li>
        <li><a href="#">Спецодежда летняя<span>/</span></a></li>
        <li><span>Костюм летний “СИРИУС-ВОЛОГДА”, Куртка, брюки</span></li>
      </ul>
    </div>
  </div>
</div>

html
Martin Hope
powerg
Asked: 2023-05-05 22:45:06 +0000 UTC
  • 6

请告诉我如何不是顺时针开始绘制饼图，而是从左到右相反？

.diagram-inner {
  --percentage: 40;
  --border-thickness: 4px;
  --main-color: #27b510;
  --w: 40px;

  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: math.div(28, 20);
  text-align: center;
  letter-spacing: -0.01em;
  font-family: $fontFamilyManrope;
}

.diagram-inner:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(farthest-side, var(--main-color) 98%, #0000)
      top/var(--border-thickness) var(--border-thickness) no-repeat,
    conic-gradient(var(--main-color) calc(var(--percentage) * 2%), #edf0f3 0);
  -webkit-mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--border-thickness)),
    #000 calc(100% - var(--border-thickness))
  );
  mask: radial-gradient(
    farthest-side,
    #0000 calc(99% - var(--border-thickness)),
    #000 calc(100% - var(--border-thickness))
  );
}

.diagram-inner:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--border-thickness) / 2);
  background: var(--main-color);
  transform: rotate(calc(var(--percentage) * 7.2deg))
    translateY(calc(50% - var(--w) / 2));
}
<div style="--percentage:40;--border-thickness:4px" class="diagram-inner">4</div>

css
Martin Hope
powerg
Asked: 2023-04-20 01:01:30 +0000 UTC
  • 5

当您单击一种颜色时，有必要更改图片。但问题是页面上可能有很多这样的块，并且所有内容都只适用于第一个。你能告诉我如何使每个块都有自己的图片吗？

document.body.addEventListener('click', e => {
  if (!e.target.matches('button')) return
  document.querySelector('.pic img').src = e.target.dataset.src
  
  document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'))
  e.target.classList.add('active')
})
.pic {
  display: inline-block;
}

button {
  padding: 1em;
}

button.active {
  background: tomato;
}
<div class="content">
  <div class="pic">
    <img src="https://image.coolblue.nl/422x390/products/1216241">
  </div>

  <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active">
    Blue
  </button>

  <button data-src="https://image.coolblue.nl/422x390/products/1214824">
    Black
  </button>
  <div>

    <div class="content">
      <div class="pic">
        <img src="https://image.coolblue.nl/422x390/products/1216241">
      </div>

      <button data-src="https://image.coolblue.nl/422x390/products/1216241" class="active">
        Blue
      </button>

      <button data-src="https://image.coolblue.nl/422x390/products/1214824">
        Black
      </button>
      <div>

javascript
Martin Hope
powerg
Asked: 2023-03-19 05:58:30 +0000 UTC
  • 5

请告诉我如何制作它以便在其前面键入文本时有光标？当文本结束时光标消失了？谢谢 

function writeTextByJS(id, text, speed) {

    const ele = document.querySelector('.main-home__subtitle');
    const txt = text.join("").split("");

    var interval = setInterval(function () {

        if (!txt[0]) {

            return clearInterval(interval);
        };

        ele.innerHTML += txt.shift();
    }, speed != undefined ? speed : 80); //скорость

    return false;
};

writeTextByJS(
    ".main-home__subtitle", //селектор
    [
        "TeXT TeXT TeXT \n",
        "TeXT TeXT TeXT TeXT \n"
    ]
);
.main-home__subtitle{
  font-size: 30px;
  max-width: 300px;
}
<div class="main-home__subtitle"></div>

javascript
Martin Hope
powerg
Asked: 2023-03-10 10:33:55 +0000 UTC
  • 5

请告诉我为什么当你点击 .catalog__title 时，最后一个 .catalog__items 块总是打开，而不是每个人都有自己的？谢谢

function catalog() {

  const catalogTitles = document.querySelectorAll('.catalog__title');
  const catalogArrows = document.querySelectorAll('.catalog__item-arrow');
  const catalogItems = document.querySelectorAll('.catalog__items');

  if (catalogTitles) {

    catalogTitles.forEach(title => {
      title.addEventListener('click', (e) => {
        catalogItems.forEach(item => {
          catalogItems.forEach(el => { el.classList.remove('_catalog-open'); });
          item.classList.add('_catalog-open')
        });
      })
    });

    catalogArrows.forEach(arrow => {
      arrow.addEventListener("click", function (e) {
        catalogItems.forEach(el => { el.classList.remove('_catalog-open'); });
      });
    });
  }
}
catalog()
.catalog__title {
  padding: 15px 100px;
  cursor: pointer;
}

.catalog__items {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -110%;
  padding: 0px 16px 0px 16px;
  transition: left 0.3s ease 0s;
  overflow: auto;
  background: grey;
}

.catalog__items._catalog-open {
  left: 0;
}
<div class="body">
  <div class="catalog__column">
    <div class="catalog__content">
      <div class="catalog__link">
        <div class="catalog__title">
          Клик
        </div>
        <div class="catalog__items">
          <div class="catalog__item-arrow">Клик назад</div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст1</a>
          </div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст2</a>
          </div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст3</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="catalog__column">
    <div class="catalog__content">
      <div class="catalog__link">
        <div class="catalog__title">
          Клик
        </div>
        <div class="catalog__items">
          <div class="catalog__item-arrow">Клик назад</div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст4</a>
          </div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст5</a>
          </div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст6</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="catalog__column">
    <div class="catalog__content">
      <div class="catalog__link">
        <div class="catalog__title">
          Клик
        </div>
        <div class="catalog__items">
          <div class="catalog__item-arrow">Клик назад</div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст7</a>
          </div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст8</a>
          </div>
          <div class="catalog__item">
            <a href="#" class="catalog__subsubtitle">Текст9</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

javascript
Martin Hope
powerg
Asked: 2023-02-11 15:12:43 +0000 UTC
  • 6

你能告诉我如何在页面上进行多个选择吗？如果一个是开放的，其他的是关闭​​的？我是js的新手。非常感谢您的帮助 https://codepen.io/ladyelizaveta/pen/JjBgEML

function selectProductCard() {
    const optionMenu = document.querySelector('.select__menu');
    const selectBtn = document.querySelector('.select__btn');
    const options = document.querySelectorAll('.select__option');
    const sBtntext = document.querySelector('.select__btntext');
    if (optionMenu) {
        selectBtn.addEventListener("click", function (e) {
            optionMenu.classList.toggle("_active")
        });
        options.forEach(option => {
            option.addEventListener("click", function (e) {
                if (document.querySelector('.select__option-text') != null) {
                    const selectedOption = option.querySelector('.select__option-text-title').innerText + option.querySelector('.select__option-text-tochka').innerText + option.querySelector('.select__option-text-subtitle').innerText;
                    sBtntext.innerText = selectedOption;
                };

                optionMenu.classList.remove("_active")
            });
        });
    }
}

window.addEventListener("DOMContentLoaded", function (e) {
    selectProductCard()
    
});
.select__menu{
  position: relative;
        padding: 12px 12px 12px 16px;
        border: 1px solid #ebe6e1;
        cursor: pointer;
        width: 100%;
        height: 20px;
        border-radius: 4px;
        display: block;
        background-color: rgba(168, 149, 131, 0.04);
        transition: all 0.5s ease 0s;
  margin-bottom: 100px;
}

.select__menu ul{
  list-style: none;
}

.select__menu._active .select__options {
  display: block;
}

.select__options {
  z-index: 100;
        position: absolute;
        top: 30px;
        min-width: 100%;
        left: 0;
        max-height: 400px;
        background-color: #fff;
        border-radius: 4px;
  background: red;
        box-shadow: 0 2px 8px rgb(31 27 22 / 8%);
        padding: 8px;
  display: none;
}
<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

<div class="select__menu">
  <div class="select__btn">
    <span class="select__btntext">
      35
    </span>
  </div>
  <ul class="select__options">
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">35</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
    <li class="select__option">
      <span class="select__option-text">
        <span class="select__option-text-title">36</span>
        <span class="select__option-text-tochka"></span>
        <span class="select__option-text-subtitle"></span>
      </span>
    </li>
  </ul>
</div>

javascript