使用javascript复制CSS:focus选择器以用于多个元素 [英] Replicate CSS :focus selector for multiple elements using javascript

问题描述

我有这个网站: https://www.australianathleticscalendar.com.au/

我想做到这一点，因此您可以一次选择一个事件"过滤器和状态"过滤器(即一次选择100m和QLD)，并且每个过滤器中的气泡都将具有样式(即:focus).对于每个过滤器，选择一个类别.当您在过滤器中更改类别时，必须同时取消选择上一个样式(即不能一次选择100m和200m.从100m移到200m会从100m中删除样式，并将其添加到200m).

I want to make it so you can have selected an 'Events' filter and 'State' filter at once (I.e. 100m and QLD at once), and the bubbles in each filter will have styling (I.e. like :focus). With each filter, select one category. When you change categories within a filter, the previous one selected must also be unstyled (I.e. can't select 100m and 200m at once. Moving from 100m to 200m would remove styling from 100m and add it to 200m).

css的问题在于您一次只能聚焦一个元素.

The problem is with css is that you can only :focus one element at a time.

如何使用javascript实现此目标?

How can I achieve this using javascript?

我已将相关代码放入此处的代码笔.

这是绘制两个过滤器的函数:

This is the functions which draw the two filters:

function drawCategories() {
var template = Handlebars.compile(document.getElementById("menu-template").innerHTML);
console.log('draw ', this.products);
document.getElementById('menu-container').innerHTML = template(this.events);
}

function drawStates() {
    var template = Handlebars.compile(document.getElementById("menu-template-2").innerHTML);
    console.log('draw ', this.products);
    document.getElementById('menu-container-states').innerHTML = template(this.states);
}


function showCategory(event) {
    this.title = event;
    drawProducts();
}

function showState(state) {
    this.titleStates = state;
    drawProducts();
}

这是两个过滤器的HTML:

And this is the HTML for the two filters:

        <!-- Events filter -->
<div class="container">
    <script id="menu-template" type="text/x-handlebars-template">           
                <ul class="navbar-nav">
                    {{#each this as |event|}}
                        <li class="nav-item"></li>
                            <a class="nav-link" href="#" onclick="showCategory('{{event.name}}');">{{event.name}}</a>
                    {{/each}}
                    <a class="navbar-brand hover-color" href="#" onclick="showAllEvents();">All Events</a>
                </ul>
                
                <ul class="navbar-nav ml-auto"></ul>
                    <li class="nav-item">                       
                    </li>
                </ul>
        </div>
    </script>
</div>

<!-- States filter -->
<div class="container">
    <script id="menu-template-2" type="text/x-handlebars-template">
                <ul class="navbar-nav">
                    {{#each this as |state|}}
                        <li class="nav-item"></li>
                            <a class="nav-link nav-link-states" href="#" onclick="showState('{{state.name}}');">{{state.name}}</a>
                    {{/each}}
                    <a class="navbar-brand hover-color-states" href="#" onclick="showAllStates();">All States</a>
                </ul>               
                <ul class="navbar-nav ml-auto"></ul>
                    <li class="nav-item">                       
                    </li>
                </ul>
        </div>
    </script>
</div>

推荐答案

通常，有许多方法可以实现这一目标.我认为最简单的方法可能是在单击处理程序中进行的调用中添加一个额外的参数-传递 this -这样处理程序就确切地知道需要设置样式的DOM元素:

As often there are many ways to achieve this. I think the easiest might be to add an extra argument to the calls made in the click handlers -- passing this -- so the handler knows exactly which DOM element needs to get styling:

<a onclick="showCategory(this, '{{event.name}}');">
<a onclick="showAllEvents(this);">
<a onclick="showState(this, '{{state.name}}');">
<a onclick="showAllStates(this);">

然后在您的代码中定义一个函数，该函数将CSS类应用于给定的DOM元素，但还要确保它是具有该类的 only 元素.然后，在点击处理程序中使用此实用程序功能，该处理程序现在还必须接受该额外的参数:

Then in your code define a function that will apply a CSS class to a given DOM element, but also makes sure that it will be the only element having that class. Then use this utility function in the click handlers, which must now also take that extra argument:

// Utility function that ensures only one element has the given CSS class:
function selectElem(elem, className) {
    let prevSelected = document.querySelector("." + className);
    if (prevSelected) prevSelected.classList.remove(className);
    elem.classList.add(className);
}

function showCategory(elem, event) { // <-- extra parameter, here and below...
    selectElem(elem, "selectedEvent"); // <-- add this call, here and below...
    this.title = event;
    drawProducts();
}

function showAllEvents(elem) {
    selectElem(elem, "selectedEvent");
    this.title = "All Events";
    drawProducts();
}

function showState(elem, state) {
    selectElem(elem, "selectedState"); // <-- different style here and below
    this.titleStates = state;
    drawProducts();
}

function showAllStates(elem) {
    selectElem(elem, "selectedState");
    this.titleStates = "All States";
    drawProducts();
}

现在由您来定义两个新CSS类的样式:selectedEvent和selectedState.您可以用逗号给它们相同的定义:

Now it is up to you to define the style of two new CSS classes: selectedEvent and selectedState. You can give them the same definition with a comma:

.selectedState, .selectedEvent {
    # Your styling ...
}

这篇关于使用javascript复制CSS:focus选择器以用于多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！