Question

点击后，我使用纯javascript将一个类分配给我的元素（SVG PATH）：

this.getElement().classList.add('active');

新课程是其已有的一系列其他课程的一部分。但是，一旦将这个新类添加到被单击的元素中，它还应该为html中的其他元素提供一个类.active，该元素与所单击的元素本身具有任何匹配的类。

HTML：

<button class="1600 1500"></button>
<button class="1600 1300 1200"></button>
<button class="1300 1200 1700 1800"></button>    
<button class="1300 1200 1100 1900"></button>

<div class="1600 1700 item leaflet"></div>

我不知道哪个按钮有匹配的类，因为这些类也是动态的。我所知道的是div将有任何类匹配任何按钮的类。

问题是，由于特定原因，我使用纯JavaScript来点击div（工作）分配新的类名：

this.getElement().classList.add('active');

所以以下内容不起作用：

this.click(function() {
  var classes = this.attr('class').split(' ')
  classes.forEach(function(elem) {
    $('.' + elem).addClass('active');
  });
});

我如何称呼点击：

function onEachFeature(feature, layer) {
    layer.on({
        click: panelShow
    });
}

function panelShow(e) {
    // This works, the class is added to the clicked element
    this.getElement().classList.add('active');
}

但我在这之外有按钮，需要按照问题激活课程。

div点击后需要

<div class="1600 1700 item leaflet active"></div>

<button class="1600 1500 active"></button>
<button class="1600 1300 1200 active"></button>
<button class="1300 1200 1700 1800 active"></button>
<button class="1300 1200 1100 1900"></button>

这是我如何处理相反的方式，点击按钮（和作品）：

var date;
$("button").on("click", function(b) {

    date = $(this).attr("data-date");

    $('path').attr('class', function(index, classNames) {
        return classNames.replace('active', '');
    });

   $("svg ." + date).attr('class', function(index, classNames) {
        return classNames + ' active';
    });

    $(".btn").removeClass("active");
    $(this).addClass("active");
 });

注意

在我使用data attribute按钮的现实生活中，但将其视为一个   对于这里的示例问题的类，它只是来自我所拥有的更复杂代码的粘贴。

我也在使用leafletsJS，这就是javascript点击的原因   上面的功能。

Answer 1

您应该尝试获取所单击元素的classList，然后迭代以查找具有匹配类的元素，例如

function panelShow(e) {
    var classes = this.getElement().getAttribute('class').split(" "); // Split to return array of all classes of the clicked element so we can loop through
    for(var i = 0; i < classes.length; i++) {
        var singleclass = document.querySelector("." + classes[i]);
        for(var j = 0; j < singleclass.length; j++){
            // Test if the element has the class 'active' before adding if it doesn't
            if(!(' ' + singleclass[j].className + ' ').indexOf(' ' + 'active' + ' ') > -1)
                singleclass[j].className += ' active';
        };
    }
}

修改我的错！正如评论中指出的那样，我已经更新了我的答案。我的语法完全错误，因为我忘记拆分班级列表并将“。”添加到我的querySelector！我假设你不想出于某些原因使用jQuery。我希望这对任何人都有帮助。

Answer 2

一个选项是：

var buttons = [].slice.call(document.querySelectorAll('.buttons button'));

function panelShow(e) {
  $("path").removeClass("active");
  var clickedPath = this.getElement();
  clickedPath.classList.add("active");
  var datum = (clickedPath.getAttribute('class').match(/\d+/g) || [])[0];
  buttons.forEach(function(btn) {
    var method = btn.getAttribute('data-date') === datum ? 'add' : 'remove';
    btn.classList[method]('active');
  });
}

将javascript与jquery混合

2 个答案: