Question

我正在使用Bootstrap。我无法弄清楚如何将它放在纯粹的javascript中。当我们点击手风琴时，这将打开一个div。

$(function() {
    $("#panelTicketsList .list-group-item").on("click", function() {
        $("#panelTicketsList .list-group-item").removeClass('selected');
        $(this).addClass('selected');
        if ($('#panelTicketsList').hasClass('col-md-12')) {
            $('#panelTicketsList').removeClass('col-md-12').addClass('col-md-3');
            $('.panelTicketDetail').removeClass('hide');
        }
     });
});

Answer 1

var list = document.getElementById('panelTicketsList');
var items = document.querySelectorAll("#panelTicketsList .list-group-item");
var detail = document.querySelectorAll(".panelTicketDetail");
items.forEach(function(btn){
    btn.addEventListener("click", function(){
        items.forEach(function(item){ item.classList.remove("selected"); });
        this.classList.add("selected");

        if(list.classList.contains('col-md-12')) {
            list.classList.remove('col-md-12');
            list.classList.add('col-md-3');
            detail.classList.add("hide");
        }

});

Answer 2

jsFiddle：https://jsfiddle.net/tqdc6yyL/

var listGroupItems = document.getElementsByClassName('list-group-item');
for (j = 0; j < listGroupItems.length; j++) {
    listGroupItems[j].addEventListener("click", function () {
        var elements = listGroupItems;
        for (i = 0; i < elements.length; i++) {
            if (elements[i].className.indexOf("col-md-12") > -1) {
                elements[i].className = elements[i].className.replace("col-md-12", "col-md-3");
                elements[i].className = elements[i].className.replace("hide", "");
            }
        }

        this.className = this.className + " selected";
    });
}

Answer 3

如果您必须支持IE8或IE9等旧版浏览器，则无法使用 forEach 或 classList 等JS功能。相反，你应该使用for循环和 className 。

＆＃13;

//Save DOM query in variable for reuse
var panelTicketsList = document.getElementById('panelTicketsList');
var panelTicketsDetails = document.getElementsByClassName('panelTicketDetail');
var listGroupItems = panelTicketsList.getElementsByClassName('list-group-item');
//go through all of the listGroupItems and set click listener
for (var i = 0; i < listGroupItems.length - 1; i++) {
  listGroupItems[i].addEventListener("click", function() {
    //On click, go through all of listGroupItems and remove selected class
    for (var j = 0; j < listGroupItems.length - 1; j++) {
      listGroupItems[j].className = listGroupItems[j].className.replace('selected', '');
    }
    //Add selected class for clicked element
    listGroupItems[i].className += 'selected';
    //test if main element has class col-md-12
    if (panelTicketsList.className.indexOf("col-md-12") > -1) {
      //replace clas col-md-12 with col-md-3
      panelTicketsList.className = panelTicketsList.className.replace('col-md-12', 'col-md-3');
      //go through all of the panelTicketDetails and remove hide class
      for (var k = 0; k < panelTicketsDetails.length - 1; k++) {
        panelTicketsDetails[k].className = panelTicketsDetails[k].className.replace('hide', '');
      }
    }
  });
}

＆＃13;

我如何将Jquery代码转换为纯JavaScript

3 个答案: